javascript - 是否可以更新 Chart.js 中图表的宽度？

Question

我的用例是我用 Chart.js 绘制图表，当用户混淆某些选项时，我想从我绘制的条形图中添加或删除条形，并相应地更新我的固定宽度最初(以编程方式)在图表上设置。

这是我绘制图表的方法:

function drawChart(barData) {
  oldData = barData;
  var ctx = document.getElementById("estimateChart").getContext("2d");
  ctx.canvas.width = getChartWidth(barData.length);
  var chartData = {
    labels: labels,
    datasets: [
      {
        highlightFill: "#888888",
        data: barData
      }
    ]
  };
  window.barFill = new Chart(ctx).Bar(chartData, {
    responsive: false
  });
  barFill.update();
}

然后当我更新图表时，我会做这样的事情

function updateChart(barData) {
  angular.forEach(oldData, function () {
    barFill.removeData();
  });
  oldData = barData;

  angular.forEach(barData, function (newBar, i) {
    barFill.addData([newBar], labels[i]);
  });
  barFill.chart.canvas.width = getWidth(barData);
  barFill.update();
}

一切正常...除了宽度在 updateChart 调用时没有改变。当我在 updateChart 调用之后查看 barFill 对象的宽度时，我的更改未保存。

我在 Chart.js 文档中找不到有关更新宽度的任何内容，因此我担心它可能不受开箱即用的支持。每当我想更改宽度时，我是否只需要创建一个新的 Chart 对象并替换 DOM 上的 canvas 元素？这将是不幸的，因为我想保留内置更新功能附带的漂亮的 Chart.js 动画。

Answer 1

而不是更改 barFill.chart.canvas.width。更改 barFill.缩放.宽度。

function updateChart(barData) {
    angular.forEach(oldData, function () {
        barFill.removeData();
    });
    oldData = barData;

    angular.forEach(barData, function (newBar, i) {
        barFill.addData([newBar], labels[i]);
    });

    barFill.scale.width = getWidth(barData);
    barFill.resize().update();
}

顺便说一句，即使没有调用 update() ，它也能工作，但我只是保留它，因为根据文档，这是正确的方式。

我建议调整容器的大小，而不是调整 Canvas 元素的大小。

<小时/>

fiddle - http://jsfiddle.net/ja8cxybf/