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

我很难找到正确的设置，使ChartJS条形图具有固定的画布高度，但允许宽度为overflow-x。我在这里找到了一个例子。。。它使用ChartJS1.0，但我使用的是ChartJS2.6。因此，我在这里找到了另一个使用ChartJS 2的示例，但是这个示例显示了仅使用几个值呈现的图表，然后使用javascript添加更多值，这会导致宽度溢出。不完全一样

我的问题是，我不知道如何使图表在所有数据都已在其中的情况下以固定高度呈现，但不尝试将画布约束到父容器的宽度。我想让它溢出来

这是我到目前为止所拥有的。

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>

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);
        }
      }
    }
  });
});

函数生成器标签（）{
var chartLabels=[]；
对于（x=0；x<100；x++）{
图表标签。按下（“标签”+x）；
}
返回图表标签；
}
函数generateData（）{
var chartData=[]；
对于（x=0；x<100；x++）{
chartData.push（Math.floor（（Math.random（）*100）+1））；
}
返回图表数据；
}
var图表数据={
标签：generateLabels（），
数据集：[{
标签：“测试数据集”，
数据：generateData（）
}]
};
$（函数（）{
var CanvasFuelExpense=$（“#图表FuelExpense”）；
var ChartFuelExpense=新图表（CanvasFuelExpense{
类型：'bar'，
数据：图表数据，
MaintaintAspectRatio:false，
回答：是的，
选项：{
工具提示：{
标题字体大小：0，
标题：0，
车身尺寸：12
},
图例：{
显示：假
},
比例：{
xAxes：[{
滴答声：{
尺寸：12，
显示：假
}
}],
雅克斯：[{
滴答声：{
尺寸：12，
贝吉纳泽罗：是的
}
}]
},
动画：{
onComplete:function（）{
var sourceCanvas=chartfeelpown.chart.canvas；
var copyWidth=chartFuelSpend.刻度['y轴-0']。宽度-10；
var copyHeight=chartFuelSpend.scales['y轴-0']。height+chartFuelSpend.scales['y轴-0']。top+10；
var targetCtx=document.getElementById（“axis FuelExpense”）.getContext（“2d”）；
targetCtx.canvas.width=copyWidth；
drawImage（sourceCanvas，0，0，copyWidth，copyHeight，0，0，copyWidth，copyHeight）；
}
}
}
});
});

因此，我的目标是使图表具有画布宽度定义的全部1200像素，但容器div仅显示600像素的量，在保持Y轴就位的情况下，我可以滚动容器以查看图表的其余部分

谁能解释一下我做错了什么？我错过了什么

---

谢谢

这似乎与您缺少

画布

的包装有关。这是你小提琴的最新版本。我添加了一个名为

addData

的

函数，该函数获取要添加的新条目数和
chart
变量。这并没有它能做到的那么好（因为我不能100%确定您想要如何添加新数据），但这是一个很好的起点。诀窍是不要在包含所有
数据的情况下初始化
图表
，您要创建
图表
，然后添加到图表中以扩展画布，否则初始渲染将使所有
数据
在
宽度
处适合


其他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);
    }
}

但请记住，这将需要添加多少数据以及
图表
实例

以及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>



我猜问题是，因为您使用的单个包装的
宽度
随着
图表
而变化，这意味着没有应用水平滚动，这样，外部包装的宽度固定，而内部包装和画布可以展开。
谢谢，因为我可以看到如何使用它将数据添加到图表中，使其可滚动。然而，我要添加的数据量可能有数百列。如果查看示例并将传递给addData方法的计数更改为100或更大，您将看到图表的高度增加，这不是我想要的。高度必须保持固定。有什么想法吗？我希望我能在yaxis上设置maxTicksLimit来限制蜱的数量，也许可以阻止高度的增长，但不是运气。它仍然随着我添加的数据的增加而增长。是的，如果您在addData（）中的for循环中使用console.log（chart.height），这看起来很奇怪它甚至说画布的高度保持不变：S。我能想到的唯一一件事是，Chart JS的渲染问题可能会导致画布的内容超出其应有的范围。有趣的是……为什么这个示例不这样做？我可以根据自己的需要在这个上面多加一些，而且高度保持不变。我真的很感谢你的意见。看起来唯一的方法是使用要绘制的数据子集创建图表，然后在渲染后添加其余数据。将此标记为正确。
addData(5, chartFuelSpend);

<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>