如何在 Chart.JS 中显示饼图的数据子集，同时在悬停时仍显示超集? [英] How can I show a subset of data on pie pieces in Chart.JS while still displaying the superset when hovering?
问题描述
我有一个饼图，当我将鼠标悬停在一块饼上时，它看起来像这样:
除了想要图例
我怎样才能把那一段数据(百分比)分解出来，然后画到每一块饼上?
这是我目前使用的代码:
var formatter = new Intl.NumberFormat("en-US");变量数据 = {标签: [香蕉(18%)"，生菜，长叶莴苣(14%)"，瓜，西瓜(10％)"，菠萝(10％)"，浆果(10％)"，生菜，春季混合(9％)"，西兰花(8%)"，甜瓜，蜜露(7％)"，葡萄(7%)"，甜瓜、哈密瓜 (7%)"],数据集:[{数据:[2755、2256、1637、1608、1603、1433、1207、1076、1056、1048]、背景颜色: ["#FFE135","#3B5323","#fc6c85","#ffec89","#021c3d","#3B5323","#046b00","#cef45a","#421C52",#FEA620"]}]};var optionsPie = {响应式:真实，scaleBeginAtZero:真，工具提示:{回调:{标签:函数(工具提示项，数据){返回 data.labels[tooltipItem.index] + ": " +formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);}}}};var ctx = $("#top10ItemsChart").get(0).getContext("2d");var top10PieChart = 新图表(ctx，{类型:'馅饼'，数据:数据，选项:选项饼});$("#top10Legend").html(top10PieChart.generateLegend());我是否需要添加 afterDraw() 事件，如果需要，它需要如何实现?
更新
我尝试在图表构造函数中添加一个 onAnimationComplete() 回调:
var top10PieChart = new Chart(ctx,{类型:'馅饼'，数据:数据，选项:选项饼，onAnimationComplete: 函数 () {var ctx = this.chart.ctx;ctx.font = this.scale.font;ctx.fillStyle = this.scale.textColor;ctx.textAlign = "中心";ctx.textBaseline = "中心";this.datasets.forEach(函数(数据集){dataset.points.forEach(函数(点){ctx.fillText(points.value, points.x, points.y - 10);});});}});...但它什么也没做.
更新 2
我还尝试将以下内容附加到选项对象:
<代码>,tooltipTemplate: "<%= value %>",onAnimationComplete: 函数 () {this.showTooltip(this.datasets[0].bars, true);}...结果相同(没有变化).
更新 3
好的，我希望答案
I've got a pie chart that looks like this when hovering over a piece of pie:
Except for wanting the legend to the right instead of on top, I'm fairly content with this, but I want just the percentage value to display "all the time" in the pie pieces - and still have the <name> (<%val>): <data> displayed on hover.
In other words, I want the pie to look something like this:
How can I break that one piece of data out (the percentage) and draw that onto each piece of pie?
Here is the code I'm using so far:
var formatter = new Intl.NumberFormat("en-US");
var data = {
labels: [
"Bananas (18%)",
"Lettuce, Romaine (14%)",
"Melons, Watermelon (10%)",
"Pineapple (10%)",
"Berries (10%)",
"Lettuce, Spring Mix (9%)",
"Broccoli (8%)",
"Melons, Honeydew (7%)",
"Grapes (7%)",
"Melons, Cantaloupe (7%)"
],
datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
]
}
]
};
var optionsPie = {
responsive: true,
scaleBeginAtZero: true,
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index] + ": " +
formatter.format(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
}
}
}
};
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie
});
$("#top10Legend").html(top10PieChart.generateLegend());
Do I need to add an afterDraw() event and, if so, just how does it need to look to accomplish this?
UPDATE
I tried adding an onAnimationComplete() callback to the chart constructor:
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor;
ctx.textAlign = "center";
ctx.textBaseline = "center";
this.datasets.forEach(function(dataset) {
dataset.points.forEach(function(points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
});
}
});
...but it does nothing.
UPDATE 2
I also tried appending the following to the options object:
,
tooltipTemplate: "<%= value %>",
onAnimationComplete: function () {
this.showTooltip(this.datasets[0].bars, true);
}
...with the same results (no change).
UPDATE 3
Okay, I was hopeful that the answer here would work, and ended up with this new code for my pie chart based on the answer there:
Added to optionsPie:
showTooltips: false,
onAnimationProgress: drawSegmentValues
Added after reference to element is retrieved:
var midX = canvas.width / 2;
var midY = canvas.height / 2
Added after pie chart instance is constructed:
var radius = top10PieChart.outerRadius;
Added function drawSegmentValues()
In context (no pun intended):
// Top 10 Pie Chart
var formatter = new Intl.NumberFormat("en-US");
var data = {
labels: [
"Bananas (18%)",
"Lettuce, Romaine (14%)",
"Melons, Watermelon (10%)",
"Pineapple (10%)",
"Berries (10%)",
"Lettuce, Spring Mix (9%)",
"Broccoli (8%)",
"Melons, Honeydew (7%)",
"Grapes (7%)",
"Melons, Cantaloupe (7%)"
],
datasets: [
{
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076
1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
]
}
]
};
var optionsPie = {
responsive: true,
scaleBeginAtZero: true,
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index] + ": " +
formatter.format
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index]);
}
}
},
showTooltips: false,
onAnimationProgress: drawSegmentValues
};
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var midX = canvas.width / 2;
var midY = canvas.height / 2
var top10PieChart = new Chart(ctx,
{
type: 'pie',
data: data,
options: optionsPie//,
});
var radius = top10PieChart.outerRadius;
$("#top10Legend").html(top10PieChart.generateLegend());
// </ Top 10 Pie Chart
// Price Compliance Bar Chart
. . . this horizontal bar chart code elided for brevity, bu
unchanged from their working state
// Forecast/Impact Analysis Bar chart
. . . this horizontal bar chart code also elided for brevity, bu
unchanged from their working state
function drawSegmentValues() {
for (var i = 0; i < top10PieChart.segments.length; i++) {
ctx.fillStyle = "white";
var textSize = canvas.width / 10;
ctx.font = textSize + "px Verdana";
// Get needed variables
var value = top10PieChart.segments[i].value;
var startAngle = top10PieChart.segments[i].startAngle;
var endAngle = top10PieChart.segments[i].endAngle;
var middleAngle = startAngle + ((endAngle - startAngle)
2);
// Compute text location
var posX = (radius / 2) * Math.cos(middleAngle) + midX;
var posY = (radius / 2) * Math.sin(middleAngle) + midY;
// Text offside by middle
var w_offset = ctx.measureText(value).width / 2;
var h_offset = textSize / 4;
ctx.fillText(value, posX - w_offset, posY + h_offset);
}
}
...but it completely hosed all three charts, leaving nothing visible/drawing.
UPDATE 4
By the way, I tried the given answer, but with no result/change - it still displays data on hover, as designed, but there is nothing otherwise.
Also, the related fiddle shows both the value and the percentage; due to real estate restrictions, I want the percentage only to be "always on" - the "whole enchilada" is only to be seen when hovering.
The following solution is using the same calculation as lamelemon's but using Chart.js plugins, which brings additional benefits :
There is no longer this blink effect caused by the
animation.onCompletesince it occurs immediatly without waiting for antything.The tooltip is above the text, which is more natural.
Follows the plugin that does it :
Chart.pluginService.register({
afterDatasetsDraw: function(chartInstance) {
// We get the canvas context
var ctx = chartInstance.chart.ctx;
// And set the properties we need
ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#666';
// For ervery dataset ...
chartInstance.config.data.datasets.forEach(function(dataset) {
// For every data in the dataset ...
for (var i = 0; i < dataset.data.length; i++) {
// We get all the properties & values we need
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
total = dataset._meta[Object.keys(dataset._meta)[0]].total,
mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius) / 2,
start_angle = model.startAngle,
end_angle = model.endAngle,
mid_angle = start_angle + (end_angle - start_angle) / 2;
// We calculate the right positions for our text
var x = mid_radius * 1.5 * Math.cos(mid_angle);
var y = mid_radius * 1.5 * Math.sin(mid_angle);
// We calculate the percentage
var percent = String(Math.round(dataset.data[i] / total * 100)) + "%";
// And display it
ctx.fillText(percent, model.x + x, model.y + y);
}
});
}
});
You can check this plugin working on this jsFiddle, and here is the result :
这篇关于如何在 Chart.JS 中显示饼图的数据子集，同时在悬停时仍显示超集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
