如何在chart.js（环形图）中添加链接？

Question

我想添加甜甜圈图表的链接，以便能够将用户发送到按所选选项过滤的记录页面。

例如 here，如果用户点击“绿色”，我希望将用户发送到显示所有“绿色”记录的页面。

我没有找到一种简单的方法来实现这一点，并尝试了一些还没有成功的方法：

（我添加了一个名为“filter”的属性，其中包含需要进行过滤的“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”获取属性“filter”。

谢谢。

- maurymmarques

Answer 1

在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属性加载在URL中的jsfiddle示例(http://jsfiddle.net/tcy74pcc/1/): 如果您要使用基于点而不是段的图表执行此操作，这里有一个关于线条类似解决方案的帖子: Displaying custom dataset properties in tooltip in chart.js 希望这能帮到您，祝您好运！

- grdevphl

---

没问题，我会使用你的代码。(但我希望他们在新版本中能够改进)非常感谢。 - maurymmarques

Answer 2

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);
        }

- Soju

---

That is important. Thank you. - maurymmarques

这个答案适用于版本2。从版本3开始，getElementsAtEvent已被替换为getElementsAtEventForMode。请参考此答案获取示例。 - Aaron Dunigan AtLee