Question

我正在使用Chart.js 2.6。我在创建图表后添加数据，这样我就可以在图表容器上创建overflow-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以使用当前画布宽度作为新标签，而不仅仅是＆＃34;测试＆＃34;。如果将循环设置为迭代531次，如果查看最后一个标签，则为32676.此时，画布基本上达到了最大宽度。当您尝试超过531时，宽度达到超过最大允许宽度的数字，因此画布对象不会渲染。

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

1 个答案: