如何添加鏈接到chart.js（甜甜圈圖表）？

我想添加鏈接到甜甜圈圖表，以便能夠發送用戶的頁面與點擊選項篩選的記錄。如何添加鏈接到chart.js（甜甜圈圖表）？

例如here，如果用戶點擊「綠色」，我想將用戶發送到顯示所有「綠色」記錄的頁面。

我沒有找到一個簡單的方法來做到這一點，並試圖像這樣不工作尚未：

（我加了屬性「過濾器」與「ID」，我需要進行過濾它）

var data = [ 
    { 
    value: 300, 
    color:"#F7464A", 
    highlight: "#FF5A5E", 
    label: "Red", 
    filter: 1 
    }, 
    { 
    value: 50, 
    color: "#46BFBD", 
    highlight: "#5AD3D1", 
    label: "Green", 
    filter: 2 
    }, 
    { 
    value: 100, 
    color: "#FDB45C", 
    highlight: "#FFC870", 
    label: "Yellow", 
    filter: 3 
    } 
] 

$(document).ready(
    function() { 
     $("#chart").click(
      function(evt){ 
       var activePoints = chart.getSegmentsAtEvent(evt); 
       var url = "http://example.com/?grid[f][collor][]=" + activePoints[0].filter 
       alert(url); 
      } 
     ); 
    } 
);

我不能夠獲得屬性「過濾器」使用「activePoints [0] .filter」

謝謝。

來源

2015-06-17 maurymmarques

在JSON中添加自定義屬性是一項可能在v2路線圖上的功能（https://github.com/nnnick/Chart.js/issues/1185）。當前標準的，可以在加入JavaScript性能做這樣的事情：

var segments = chart.segments; 
for (var i = 0; i < segments.length; i++) { 
    segments[i].filter = i+1; 
}

這裏的網址中包含過濾/ id屬性加載（http://jsfiddle.net/tcy74pcc/1/）一個的jsfiddle：

如果你想這樣做與基於點而不是段的圖表，這裏有一個類似的線路解決方案： Displaying custom dataset properties in tooltip in chart.js

希望有所幫助。祝你好運！

來源

2015-06-17 19:39:02 grdevphl

是的，這對我很有用。我將使用你的代碼。（但我希望他們會改進新版本）非常感謝。 – maurymmarques

getSegmentsAtEvent現在已棄用。改用getElementsAtEvent。

以下是完整的功能，併爲每個細分區段添加了動態顏色。

var piChart = function (ctx, labelName, labels, values, filters) { 
     var colors = dynamicColors(values.length) 

     var data = { 
      labels: labels, 
      datasets: [ 
       { 
        label: labelName, 
        backgroundColor: colors.backColors, 
        hoverBackgroundColor: colors.highColors, 
        borderColor: colors.borders, 
        hoverBorderColor: colors.borders, 
        borderWidth: 1, 
        data: values 
       } 
      ] 
     }; 

     var pieChart = new Chart(ctx, { 
      type: "pie", 
      data: data 
     }); 


     if (filters != null) { 
      ctx.click(
       function (evt) { 
        var activePoints = pieChart.getElementAtEvent(evt); 
        if (activePoints.length > 0) { 
         var index = activePoints[0]["_index"]; 
         location.href = filters[index]; 
        } 
       }); 
     } 
    } 

    var dynamicColors = function (count) { 
     var backColors = []; 
     var highColors = []; 
     var borders = []; 

     for (var i = 0; i < count; i++) { 
      var r = Math.floor(Math.random() * 255); 
      var g = Math.floor(Math.random() * 255); 
      var b = Math.floor(Math.random() * 255); 
      var backColor = "rgba(" + r + "," + g + "," + b + ", 0.4)"; 
      var highColor = "rgba(" + r + "," + g + "," + b + ", 0.8)"; 
      var border = "rgba(" + r + "," + g + "," + b + ", 1)"; 

      backColors.push(backColor); 
      highColors.push(highColor); 
      borders.push(border); 
     }

來源

2016-06-13 21:27:45 Soju

這很重要。謝謝。 – maurymmarques

如何添加鏈接到chart.js（甜甜圈圖表）？

回答

相關問題