Question

我想使用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感兴趣。

Answer 1

您可以扩展图表来执行此操作。

预览

<强>脚本

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(); } });

然后

window.myBar = new Chart(ctx).BarAlt(barChartData, { ...

如果您觉得工具提示不能从黑色背景中脱颖而出，则可以更改tooltipFillColor。

小提琴 - http://jsfiddle.net/o0geemtp/

Chart JS尝试仅为一个数据集

1 个答案: