gpt4 book ai didi

javascript - 如何使用chartjs在每个条形图上自定义索引标签?

转载 作者:行者123 更新时间:2023-12-03 09:30:22 25 4
gpt4 key购买 nike

我正在开发一个使用条形图的网站,但我找不到自定义条形图以在每个条形图上显示值的方法。

这是我的条形图js

$(function(){
var t;
function size(animate){
if (animate == undefined){
animate = false;
}
clearTimeout(t);
t = setTimeout(function(){
$("#bar-chart-js").each(function(i,el){
$(el).attr({
"width":$(el).parent().width(),
"height":$(el).parent().outerHeight()
});
});
redraw(animate);
var m = 0;
$(".chartJS").height("");
$(".chartJS").each(function(i,el){ m = Math.max(m,$(el).height()); });
$(".chartJS").height(m);
}, 30);
}
$(window).on('resize', function(){ size(false); });

function redraw(animation){
var options = {};
if (!animation){
options.animation = true;
} else {
options.animation = true;
}
var dataJson1 = <?php echo json_encode($monthly_income);?>;
var dataJson2 = <?php echo json_encode($monthly_expense);?>;
var data1 = $.map(dataJson1, function(el) { return el; });
var data2 = $.map(dataJson2, function(el) { return el; });
//console.log(dataJson1);
//console.log('data1:' + data1);
var barChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
datasets : [
{
fillColor : "#79D1CF",
strokeColor : "#79D1CF",
data : data1
},
{
fillColor : "#E67A77",
strokeColor : "#E67A77",
data : data2
}
]
};
var myLine = new Chart(document.getElementById("bar-chart-js").getContext("2d")).Bar(barChartData);
}
size(true);
});

我想将索引标签显示如下图

enter image description here

请帮助我,我非常感谢您的帮助。

最佳答案

只需在animationComplete回调中添加标签

var myLine = new Chart(document.getElementById("bar-chart-js").getContext("2d")).Bar(barChartData, {
showTooltips: false,
onAnimationComplete: function () {

var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";

this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
})
}
});

我已经关闭了工具提示,假设您不再需要它们(因为新添加的标签中显示了相同的信息)。如果您需要工具提示,那么您需要扩展条形图并将上述逻辑移至每次绘制图表之后。

<小时/>

fiddle - http://jsfiddle.net/geaje18p/ (我用硬编码数组替换了你的 php echo)

<小时/>

enter image description here

关于javascript - 如何使用chartjs在每个条形图上自定义索引标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31529272/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com