Question

我正在为大型数据集创建一个带有水平滚动条的堆积条形图，但看到黑屏。我的问题是：条形图宽度是否有限制？如果不是，导致以下问题的原因是什么？任何人都可以帮助解决此问题

    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<700;x++) {
  myLiveChart.data.datasets[0].data.push(Math.random() * 100);
  myLiveChart.data.labels.push("Test");
  var newwidth = $('.chartAreaWrapper2').width() +60;
  $('.chartAreaWrapper2').width(newwidth);
}


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

如果我将for循环中的x值更改为400，则工作正常。但是，如果我将数字增加到500或更多，我会看到黑屏。为什么？

JsFiddle中的示例：

http://jsfiddle.net/madhu30/wg2h97j5/

Chart.js为大数据集呈现黑屏

0 个答案: