ChartJS 2.6-条形图固定高度可滚动-X

Question

我很难弄清楚正确的设置以具有具有固定帆布高的ChartJS条形图，但允许宽度为Overflow-X。我在这里找到了一个示例... http：//jsfiddle.net/mbhavfwm/使用ChartJS 1.0，但我正在使用ChartJS 2.6。因此，我在这里找到了另一个示例http://jsfiddle.net/jmpxgufu/使用ChartJs 2，但是此示例显示了仅少数值呈现的图表，然后使用JavaScript添加了更多的javaScript，然后使用JavaScript添加宽度，从而导致宽度泛滥。不完全一样。

我的问题是，我无法弄清楚如何将图表呈现在固定高度上，而没有所有数据，但不要试图将画布限制在父容器的宽度上。我要它溢出。

这是我到目前为止所拥有的。https://jsfiddle.net/fed79b7t/

html

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <canvas id="chart-FuelSpend" height="300" width="1200"></canvas>
  </div>
  <canvas id="axis-FuelSpend" height="300" width="0"></canvas>
</div>

CSS

.chartWrapper {
  position: relative;
}
.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.chartAreaWrapper {
  width: 600px;
  overflow-x: scroll;
}

javascript

function generateLabels() {
  var chartLabels = [];
  for (x = 0; x < 100; x++) {
    chartLabels.push("Label" + x);
  }
  return chartLabels;
}
function generateData() {
  var chartData = [];
  for (x = 0; x < 100; x++) {
    chartData.push(Math.floor((Math.random() * 100) + 1));
  }
  return chartData;
}
var chartData = {
  labels: generateLabels(),
  datasets: [{
    label: "Test Data Set",
    data: generateData()
  }]
};
$(function() {
  var canvasFuelSpend = $('#chart-FuelSpend');
  var chartFuelSpend = new Chart(canvasFuelSpend, {
    type: 'bar',
    data: chartData,
    maintainAspectRatio: false,
    responsive: true,
    options: {
      tooltips: {
        titleFontSize: 0,
        titleMarginBottom: 0,
        bodyFontSize: 12
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          ticks: {
            fontSize: 12,
            display: false
          }
        }],
        yAxes: [{
          ticks: {
            fontSize: 12,
            beginAtZero: true
          }
        }]
      },
      animation: {
        onComplete: function() {
          var sourceCanvas = chartFuelSpend.chart.canvas;
          var copyWidth = chartFuelSpend.scales['y-axis-0'].width - 10;
          var copyHeight = chartFuelSpend.scales['y-axis-0'].height + chartFuelSpend.scales['y-axis-0'].top + 10;
          var targetCtx = document.getElementById("axis-FuelSpend").getContext("2d");
          targetCtx.canvas.width = copyWidth;
          targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
        }
      }
    }
  });
});

因此，我的目标是将图表宽度定义的整个图表包含整个1200像素，但是对于容器div而言，仅显示600个像素量Y轴到位。

任何人都可以阐明我做错了什么吗？我想念什么？

谢谢！

Answer 1

它似乎与您缺少canvas周围包装器的事实有关。这是您的小提琴的更新版本。我添加了一个称为addData的function，该CC_3获取要添加的新条目和chart变量的数量。它不像它那样好(因为我不确定您想如何添加新数据(，但这是一个很棒的起点。诀窍是不要在包含所有data的情况下初始化chart，而是要创建chart，然后添加到以后添加以展开画布，否则初始渲染将有效地适合该width中的所有data。

https://jsfiddle.net/qmqmg82z/3/

附加JavaScript代码：

function addData(numData, chart){
    for (var i = 0; i < numData; i++){
        chart.data.datasets[0].data.push(Math.random() * 100);
        chart.data.labels.push("Label" + i);
        var newwidth = $('.chartAreaWrapper2').width() +60;
        $('.chartAreaWrapper2').width(newwidth);
    }
}

，然后在页面加载函数的末尾(或您想添加新数据的地方(添加此功能：

addData(5, chartFuelSpend);

但请记住，这将需要您要添加的大量数据和chart实例。

和html：

<div class="chartWrapper">
  <div class="chartAreaWrapper">
      <div class="chartAreaWrapper2">
          <canvas id="chart-FuelSpend" height="300" width="1200"></canvas>
      </div>
  </div>
  <canvas id="axis-FuelSpend" height="300" width="0"></canvas>
</div>

我猜想问题是因为您所拥有的单个包装器的width与chart一起更改，这意味着没有应用水平滚动