我创建了一个圆环图 . 我想在圆环图中一起显示工具提示以及图例 .
我已经关注了这个堆栈溢出问题 .
Question which explain the tooltip to be shown always
我按照答案创建了一个圆环图,并试图始终显示工具提示 .
它工作正常,但它没有显示所有的标签,尤其是 . 当你有多个0值的数据时 . 它只是覆盖标签 .
我的标签和值是“红色”-0,“绿色”-0和“黄色”-100
这里显示的是“Yellow-100”和“Green-0”的工具提示,我认为它覆盖了“Red-0” . 如何同时显示“Red-0”和“Green-0”的工具提示 .
HTML:
<canvas id="canvas"></canvas>
使用Javascript:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [0, 0, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
showAllTooltips: true
}
});
这是jsfiddle的链接 .
doughnut chart 0 data tooltip is not shown for all
图表版本:2.1.0
请帮忙 .
1 回答
您可以使用工具提示回调来检查内部的数据并将其放在不同的位置 .
例如,您可以返回 Headers 中的红色标签和页脚中的绿色标签: