Question

我无法找到正确的设置，以获得具有固定画布高度但允许宽度为overflow-x的ChartJS条形图。我在这里找到了一个例子...... http://jsfiddle.net/mbhavfwm/使用了ChartJS 1.0，但我使用的是ChartJS 2.6。所以，我在这里找到另一个使用ChartJS 2的例子http://jsfiddle.net/jmpxgufu/，但是这个例子显示了只用几个值渲染的图表，然后使用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周围的包装有关。这是你小提琴的更新版本。我添加了名为function的{{1}}，其中包含您要添加的新条目数和addData变量。它不是那么好（因为我不是100％确定你想要如何添加新数据）但它是一个很好的起点。诀窍是不要初始化包含所有chart的{{1}}，你想要创建chart然后添加它以扩展画布，否则初始渲染将适合data的所有chart。

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

其他JavaScript代码：

data

然后在页面加载功能结束时（或者想要添加新数据的任何地方）添加此函数调用：

width

但请记住，这需要您添加大量数据和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); } }实例。

HTML：

addData(5, chartFuelSpend);

我猜测问题是因为你所拥有的单个包装器的chart和<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，而内部包装器和画布可以展开。

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

1 个答案: