chartjs,圆环图无法正确呈现工具提示
charts js, doughnut chart not rendering tooptips correctly
我有一个多级圆环图,但它没有正确呈现这里是代码
问题是,鼠标悬停在所有绿色部分上它说物体,在所有灰色部分上它说产品,我想要的解决方案是,在外环上它应该说产品,在中间物体上,最里面应该是材料,灰色区域应该只是显示号码。这是一个 jsfiddle 的问题
代码:
var op=93;
var ap=99;
var mp=66;
var ctx = new Chart(myChart, {
type: 'doughnut',
data: {
labels: ['Objects', 'Products', 'Materials'],
datasets: [{
label: 'Objects',
data: [op, 100 - op],
backgroundColor: ['#006a4e','#eeeeee'],
hoverOffset: 4
},{
label: 'Products',
data: [ap, 100 - ap],
backgroundColor: ['#2e856e', '#eeeeee'],
hoverOffset: 4
},
{
label: 'Materials',
data: [mp, 100 - mp],
backgroundColor: ['#5ca08e', '#eeeeee'],
hoverOffset: 4
}
]
},
options: {
//cutoutPercentage: 40,
height: 200,
width:200
}
});
您可以使用 Chart.JS 2.7.2 相当简单地实现这一点。将 labels
添加到每个数据集,如下所示:
data: {
labels: ['Existing', 'Non'],
datasets: [
{
labels: ['Objects', 'Non-objects'],
...
}, {
labels: ['Products', 'Non-products'],
...
},
{
labels: ['Materials', 'Non-materials'],
...
}
]
}
并添加以下标签工具提示回调:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
演示:https://jsfiddle.net/adelriosantiago/fxd6vops/3/
我相信 Chart.JS > 3.0 也是可能的,但我不知道是如何改变结构的。
我遇到了同样的问题,这花了很多时间,但最终起作用的是导入这些元素并初始化它们..
从'chart.js'导入{图表为ChartJS、ArcElement、工具提示、图例};
ChartJS.register(ArcElement, 工具提示, 图例);
这些是有助于制作整个图表的元素。你不能跳过它们
我有一个多级圆环图,但它没有正确呈现这里是代码 问题是,鼠标悬停在所有绿色部分上它说物体,在所有灰色部分上它说产品,我想要的解决方案是,在外环上它应该说产品,在中间物体上,最里面应该是材料,灰色区域应该只是显示号码。这是一个 jsfiddle 的问题 代码:
var op=93;
var ap=99;
var mp=66;
var ctx = new Chart(myChart, {
type: 'doughnut',
data: {
labels: ['Objects', 'Products', 'Materials'],
datasets: [{
label: 'Objects',
data: [op, 100 - op],
backgroundColor: ['#006a4e','#eeeeee'],
hoverOffset: 4
},{
label: 'Products',
data: [ap, 100 - ap],
backgroundColor: ['#2e856e', '#eeeeee'],
hoverOffset: 4
},
{
label: 'Materials',
data: [mp, 100 - mp],
backgroundColor: ['#5ca08e', '#eeeeee'],
hoverOffset: 4
}
]
},
options: {
//cutoutPercentage: 40,
height: 200,
width:200
}
});
您可以使用 Chart.JS 2.7.2 相当简单地实现这一点。将 labels
添加到每个数据集,如下所示:
data: {
labels: ['Existing', 'Non'],
datasets: [
{
labels: ['Objects', 'Non-objects'],
...
}, {
labels: ['Products', 'Non-products'],
...
},
{
labels: ['Materials', 'Non-materials'],
...
}
]
}
并添加以下标签工具提示回调:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
演示:https://jsfiddle.net/adelriosantiago/fxd6vops/3/
我相信 Chart.JS > 3.0 也是可能的,但我不知道是如何改变结构的。
我遇到了同样的问题,这花了很多时间,但最终起作用的是导入这些元素并初始化它们..
从'chart.js'导入{图表为ChartJS、ArcElement、工具提示、图例}; ChartJS.register(ArcElement, 工具提示, 图例);
这些是有助于制作整个图表的元素。你不能跳过它们