javascript - 将新数据添加到空 Chart.js 图表不会正确呈现新数据

Question

我有一个 Chart.js 条形图，它在页面加载时实例化。然后，我希望在图表可用时将数据添加到图表中(创建时没有可用数据)。然而，传入新数据似乎总是使图表无法渲染传入的第一组数据:

var bar_chart_data = {
labels: [],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: []
    }
]
};

var ctx = $("#bar-chart").get(0).getContext("2d");
var bar_chart = new Chart(ctx).Bar(bar_chart_data);

bar_chart.addData([2], "test")
bar_chart.addData([2], "test2")

我尝试了多种方法，包括:

• 传入空标签和数据数组(上图)
• 传入空标签数组，未设置数据字段
• 传入包含一个元素的有效标签和数据数组，随后使用 bar_chart.removeData() 将其删除，然后再次尝试添加有效数据
• 添加新数据后调用 bar_chart.update()

jsfiddle

Answer 1

当图表尝试在图表中没有数据的情况下计算 X 时，问题出现在比例类内部。当其中没有数据时，这会导致无穷大，这会弄乱图表。所以你可以像这样重写 Chart.Scale.calculateX : ( http://jsfiddle.net/leighking2/3nrhtyz4/ ) 编辑 - @Matt Humphrey 指出该修复不适用于折线图，因此这里是基于他的 github 评论的更新 (github.com/nnnick/Chart.js/issues/573#issuecomment-56102121)

   Chart.Scale = Chart.Scale.extend({
    calculateX: function (index) {
        //check to ensure data is in chart otherwise we will get inifinity
        if (!(this.valuesCount - (this.offsetGridLines ? 0 : 1))) {
            return 0;
        }
        var isRotated = (this.xLabelRotation > 0),
            // innerWidth = (this.offsetGridLines) ? this.width - offsetLeft - this.padding : this.width - (offsetLeft + halfLabelWidth * 2) - this.padding,
            innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
            valueWidth = this.valuesCount === 0 ? 0 : innerWidth / (this.valuesCount - ((this.offsetGridLines) ? 0 : 1)),
            valueOffset = (valueWidth * index) + this.xScalePaddingLeft;

        if (this.offsetGridLines) {
            valueOffset += (valueWidth / 2);
        }

        return Math.round(valueOffset);
    },
});

您现在可以像以前一样正常使用图表js。

var bar_chart_data = {
    labels: [],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: []
    }, {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: []
    }]
};

var bar_chart_options = {
    responsive: false
};

var ctx = $("#bar-chart").get(0).getContext("2d");
var bar_chart = new Chart(ctx).Bar(bar_chart_data, bar_chart_options);

bar_chart.addData([1, 1], "test")
bar_chart.addData([2, 2], "test2")