Javascript 如何添加到chart.js（甜甜圈图表）的链接？

我想添加到油炸圈饼图表的链接，以便能够向用户发送一个页面，其中包含通过单击选项过滤的记录

例如，如果用户单击“绿色”，我想将用户发送到显示所有“绿色”记录的页面

我没有找到一个简单的方法来实现这一点，我尝试了这样的方法，但仍然不起作用：

（我添加了一个属性“filter”，该属性带有过滤它所需的“id”）

我无法使用“activePoints[0].filter”获取属性“filter”

---

谢谢。

在JSON中添加自定义属性可能是v2（）路线图上的一项功能。目前，您可以通过如下方式在javascript中添加属性：

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

var segments=chart.segments；
对于（变量i=0；i

下面是一个JSFIDLE，url（）中加载了filter/id属性：

如果您想使用基于点而非线段的图表来实现这一点，这里有一篇文章提供了类似的直线解决方案：

---

希望有帮助。祝你好运

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

var piChart=函数（ctx、标签名、标签、值、过滤器）{
var colors=dynamicColors（value.length）
风险值数据={
标签：标签，
数据集：[
{
标签：labelName，
背景颜色：颜色。背景颜色，
hoverBackgroundColor:colors.highColors，
边框颜色：颜色。边框，
hoverBorderColor:colors.borders，
边框宽度：1，
数据：值
}
]
};
var pieChart=新图表（ctx{
键入：“馅饼”，
数据：数据
});
if（过滤器！=null）{
点击(
功能（evt）{
var activePoints=pieChart.getElementAtEvent（evt）；
如果（activePoints.length>0）{
var指数=活跃点[0][“_指数”]；
location.href=过滤器[索引]；
}
});
}
}
var dynamicColors=函数（计数）{
var backColors=[]；
var-highColors=[]；
var borders=[]；
对于（变量i=0；i

是的，这对我很有用。我会使用你的代码。（但我希望他们在新版本中会改进这一点）非常感谢。这很重要。谢谢。

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