ChartJS 2 - 添加 X 个项目后将数据添加到图表中断

Question

我正在使用 Chart.js 2.6。我在创建图表后添加数据，以便我可以在图表容器上创建溢出-x。

例如here。

问题是，在我的示例中，如果将 for 循环从 532 更改为 531 或更少，则图表呈现正常。但是，当计数为 532 或更高时，图表不会引发错误，但它是空白的。我不确定是什么原因造成的。

任何人都可以看看它可能是什么？这似乎与我在每次迭代中增加 chartAreaWrapper2 div 的宽度的方式有关，但我不知道为什么。

JS

var ctx = document.getElementById("myChart").getContext("2d");

var chart = {
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: {

            onComplete: function(animation) {
                var sourceCanvas = myLiveChart.chart.canvas;
                var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
                var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
                var targetCtx = document.getElementById("myChartAxis").getContext("2d");
                targetCtx.canvas.width = copyWidth;
        targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
            }
        }
    },
    type: 'bar',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
    }
};

var myLiveChart = new Chart(ctx, chart);


for(x=0;x<532;x++) {
    myLiveChart.data.datasets[0].data.push(Math.random() * 100);
    myLiveChart.data.labels.push("Test");
    var newwidth = $('.chartAreaWrapper2').width() + 60;
    $('.chartAreaWrapper2').width(newwidth);
}

HTML

<div class="chartWrapper">
    <div class="chartAreaWrapper">
        <div class="chartAreaWrapper2">
            <canvas id="myChart"></canvas>
        </div>
    </div>

    <canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

CSS

.chartWrapper {
    position: relative;
}

.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}

.chartAreaWrapper {
    overflow-x: scroll;
    position: relative;
    width: 100%;
}

.chartAreaWrapper2 {
    position: relative;
    height: 300px;
}

Answer 1

<canvas> 元素有一个最大宽度。在 Chrome 和 Firefox 中，该最大值为 32,767 像素。有关<canvas> 元素在不同浏览器中的最大宽度的更多详细信息，请参阅this answer。

我更新了JSFiddle 以使用当前画布宽度作为新标签，而不仅仅是“测试”。如果将循环设置为迭代531次，如果你看最后一个标签，它是32676。此时，画布基本上达到了最大宽度。当您尝试超过 531 时，宽度会达到超出最大允许宽度的数字，因此画布对象不会呈现。