如何向图表添加链接.js(圆环图)
How to add links to chart.js (Doughnut Charts)?
我想添加指向圆环图的链接,以便能够向用户发送一个页面,其中包含通过单击选项过滤的记录。
例如,如果用户单击"绿色",我想将用户发送到将显示所有"绿色"记录的页面。
我没有找到一个简单的方法来做到这一点,并尝试了这样的东西,但还没有奏效:
(我添加了一个属性"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"
谢谢。
在 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;
}
下面是一个在 url (http://jsfiddle.net/tcy74pcc/1/) 中加载了过滤器/id 属性的 jsfiddle:
如果您想使用基于点而不是线段的图表来执行此操作,这里有一篇具有类似线条解决方案的文章:在图表的工具提示中显示自定义数据集属性.js
希望有帮助。祝你好运!
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);
}
相关文章:
- D3.js模式不适用于弧形或圆环图
- D3从嵌套的JSON中绘制第二个圆环图
- 在同一个圆环图中使用不同的数据
- 如何在d3.js饼图或圆环图中添加阴影
- 如何更改圆环图中文本的颜色
- 修改d3.js圆环图以读取json数组
- 如何在chart.js中显示圆环图上的标签
- D3.js-带有多个圆环和动画过渡的圆环图
- 直接从代码笔复制的圆环图代码不起作用
- c3.js圆环图onclick函数
- Highcharts.js如何在一个原始中制作双圆环图
- d3.js单击时更改数据(圆环图的多个实例)
- 如何将样式添加到圆环图c3.js的标题中
- D3.js-从JSON创建多圆环图数据集
- D3.js为带内环的圆环图添加一个图例
- 使用动态数据c3.js创建圆环图
- D3.js:Placcin'圆环图圆弧上的文字
- D3.js-带有多个圆环的圆环图
- Chart.js圆环图无法正常工作
- 如何向图表添加链接.js(圆环图)