我正在创建一个条形图,如下所示:
var ctxForecastChart = $("#forecastLineChart").get(0).getContext("2d");
var forecastChartData = {
labels: [
"Total Sales"
],
datasets: [
{
label: "8/28/2016 - 9/3/2016",
backgroundColor: "rgba(255,0,0,0.75)",
hoverBackgroundColor: "rgba(255,0,0,1)",
data: [240]
},
{
label: "9/25/2016 - 10/2/2016",
backgroundColor: "rgba(255,153,0,0.75)",
hoverBackgroundColor: "rgba(255,153,0,1)",
data: [272]
},
{
label: "9/18/2016 - 9/24/2016",
backgroundColor: "rgba(255,255,0,0.75)",
hoverBackgroundColor: "rgba(255,255,0,1)",
data: [250]
},
{
label: "9/4/2016 - 9/10/2016",
backgroundColor: "rgba(0,255,0,0.75)",
hoverBackgroundColor: "rgba(0,255,0,1)",
data: [232]
},
{
label: "9/11/2016 - 9/17/2016",
backgroundColor: "rgba(0,0,255,0.75)",
hoverBackgroundColor: "rgba(0,0,255,1)",
data: [244]
}]
};
var forecastOptions = {
tooltips: {
enabled: true
}
};
var forecastBarChart = new Chart(ctxForecastChart,
{
type: 'bar',
data: forecastChartData,
options: forecastOptions
});
看起来像这样:
我想要做的是在最后一个栏(蓝色栏)上方添加一个标签,并显示前一个/第四个栏与该栏之间的百分比差异。在本例中,该值应为“+5.2%”,如下所示:
我认为这需要注册 afterDraw() 事件,但它的具体外观超出了我的范围。
更新
如果我将其添加到建议的代码中:
if (chartInstance.id !== 2) return; // affect this one only
在上下文中:
afterDraw: function (chartInstance) {
if (chartInstance.id !== 2) return; // affect this one only
// We get the canvas context
var ctx = chartInstance.chart.ctx;
...结果比没有它要好一些(它破坏了我的第一个(饼图)图表并完全消除了接下来的两个图表(包括这里讨论的图表):
正如您所看到的,饼图仍然是水管状的,两个条形图中的值都缩小了,就好像一个食人部落对它们施展了邪恶的把戏。而且,最终栏顶部没有任何附加值。
最佳答案
首先,您正确地考虑将 afterDraw
事件与 plugin 一起使用。我知道在所有数据和选项中找到我们真正想要的东西可能会很困惑。
但是,遵循一个插件可以帮助您完成您正在寻找的事情:
var myPlugin = {
afterDraw: function(chartInstance) {
// We get the canvas context
var ctx = chartInstance.chart.ctx;
// And set all the properties we need
ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#666';
// We get the number of datasets we have in your chart
var numOfDatasets = chartInstance.config.data.datasets.length;
// For every dataset in our chart ...
chartInstance.data.datasets.forEach(function(dataset) {
// If it is not the last dataset, we return now (no action at all)
if (dataset._meta[0].controller.index != numOfDatasets - 1) return;
// For every data in the dataset ...
for (var i = 0; i < dataset.data.length; i++) {
// We get the previous dataset (to compare later)
var previousDataset = chartInstance.config.data.datasets[dataset._meta[0].controller.index - 1];
// And get the model of the current value
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
// We calculate the percentage difference with the previous
var value = ((dataset.data[i] - previousDataset.data[i]) / previousDataset.data[i]) * 100;
// And write it with a "%" symbol
// The ternary adds a "+" symbol if it is a positive value
ctx.fillText((value > 0 ? "+" : "") + value.toFixed(1) + "%", model.x, model.y);
}
});
}
};
Chart.pluginService.register(myPlugin);
<小时/>
您可以看到此代码正在运行 on this jsFiddle这是它的结果:
关于javascript - 如何在 Chart.JS 条形图中最后一个条形上方添加标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39735005/