如何添加指向 chart.js(甜甜圈图)的链接?

How to add links to chart.js (Doughnut Charts)?(如何添加指向 chart.js(甜甜圈图)的链接?)

问题描述

我想添加指向圆环图的链接，以便能够向用户发送一个页面，其中包含通过单击选项过滤的记录.

I would like to add links to doughnut charts to be able to send the user for a page with the records filtered by the clicked option.

例如这里，如果用户点击绿色"，我想将用户发送到一个显示所有绿色"记录的页面.

For example here, if the user click on "Green", I want to send the user to a page that will show all "Green" records.

我没有找到一种简单的方法来做到这一点，并尝试了类似的方法，但目前还不行:

I didn't find a easy way to do that, and tried something like this that isn't working yet:

(我添加了一个属性filter"和我需要过滤它的id")

(I added a attribute "filter" with the "id" that I need to filter it)

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"

I'm not being able to get the attribute "filter" using "activePoints[0].filter"

谢谢.

推荐答案

在 JSON 中添加自定义属性是 v2 路线图中的一项功能(https://github.com/nnnick/Chart.js/issues/1185).就目前而言，您可以在 javascript 中添加属性，如下所示:

Adding custom properties in JSON is a feature that may be on the roadmap for v2 (https://github.com/nnnick/Chart.js/issues/1185). As it currently stands, you can add properties in javascript doing something like this:

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

这是一个在 url 中加载 filter/id 属性的 jsfiddle (http://jsfiddle.net/tcy74pcc/1/):

Here's a jsfiddle with the filter/id property loading in the url (http://jsfiddle.net/tcy74pcc/1/):

如果您想使用基于点而不是线段的图表来执行此操作，这里有一个帖子，其中包含类似的线解决方案:在chart.js的工具提示中显示自定义数据集属性

If you want to do this with a chart based on points rather than segments, here's a post with a similar solution for lines: Displaying custom dataset properties in tooltip in chart.js

希望对您有所帮助.祝你好运！

Hope that helps. Best of luck!

这篇关于如何添加指向 chart.js(甜甜圈图)的链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！