我想用Chart JS创建一个图表 . 默认情况下没有堆积条形图,但在官方文档中它们列出了此扩展名:https://github.com/Regaddi/Chart.StackedBar.js
我想要实现的目标不一定是堆积条形图 . 这是一个例子:
所以我的数据是红色的,我想用黑色填充其余的最大值 .
我的问题是,当我翻过一个栏时,我无法格式化工具提示 . 理想情况下,我想格式化它,只显示红色数据集 .
这是我的代码:
var barChartData = {
labels : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
datasets : [
{
fillColor : "rgba(0,12,4,1)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(0,0,0,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [8, 5, 15, 23, 20, 0, 11, 20, 25, 15, 10, 0,
0, 0, 10, 12, 25, 20, 15, 25, 0, 5,
5, 3, 0, 0, 0, 7, 15, 12, 0,]
},
{
fillColor : "rgba(192,12,4,1)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(192,12,4,0.5)",
highlightStroke: "rgba(220,220,220,1)",
data : [17, 20, 10, 2, 5, 0, 14, 5, 0, 10, 15, 25,
0, 0, 15, 13, 0, 5, 10, 0, 25, 20,
20, 22, 25, 0, 0, 18, 10, 13, 25,]
},
]
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).StackedBar(barChartData, {
responsive : true,
tooltipFillColor: "rgba(0,0,0,0.8)",
multiTooltipTemplate: "<%= 'Used MB' %> : <%= value %>",
scaleOverride : true,
scaleSteps : 5,
scaleStepWidth : 5,
scaleStartValue : 0,
barValueSpacing : 3,
barShowStroke: false
});
};
任何想法如何可能?或者是否可以仅使用简单的条形图来创建它?
我无法弄清 multiTooltipTemplate: "<%= 'Used MB' %> : <%= value %>",
格式如何工作 .
请不要建议其他库,我对Chart JS感兴趣 .
1 回答
您可以扩展图表来执行此操作 .
Preview
Script
然后
如果您觉得工具提示不能从黑色背景中脱颖而出,则可以更改
tooltipFillColor
.小提琴 - http://jsfiddle.net/o0geemtp/