Chart JS attempt to stacked bar chart tooltip for only one dataset
我想用 Chart JS 创建一个图表。默认情况下没有堆积条形图,但在官方文档中他们列出了这个扩展:
https://github.com/Regaddi/Chart.StackedBar.js
不过,我想要实现的不一定是堆积条形图。这是一个例子:
所以我的数据是红色的,我想用黑色填充其余的最大值。
我的问题是当我将鼠标悬停在栏上时,我无法格式化工具提示。理想情况下,我想对其进行格式化,以便只显示红色数据集。
这是我的代码:
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 32 33 34 35 36 37 | 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 }); }; |
任何想法这是怎么可能的?或者是否可以只用一个简单的条形图来创建它?
我无法弄清楚
请不要推荐其他库,我对 Chart JS 很感兴趣。
你可以扩展你的图表来做到这一点。
预览
脚本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | Chart.types.Bar.extend({ name:"BarAlt", draw: function () { Chart.types.Bar.prototype.draw.apply(this, arguments); var ctx = this.chart.ctx; var scale = this.scale; ctx.save(); ctx.fillStyle = 'black'; this.datasets[0].bars.forEach(function (bar, i) { if (bar.value != 0) { ctx.beginPath(); ctx.moveTo(bar.x - bar.width / 2, bar.y); ctx.lineTo(bar.x + bar.width / 2, bar.y); ctx.lineTo(bar.x + bar.width / 2, scale.startPoint); ctx.lineTo(bar.x - bar.width / 2, scale.startPoint); ctx.closePath(); ctx.fill(); } }) ctx.restore(); } }); |
然后
1 2 | window.myBar = new Chart(ctx).BarAlt(barChartData, { ... |
如果您觉得工具提示没有从黑色背景中突出,您可以更改
小提琴 - http://jsfiddle.net/o0geemtp/