是否可以在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调用中宽度不变之外。 当我查看barFill对象的宽度时，在updateChart调用之后，未保存我的更改。

我无法在Chart.js文档中找到有关更新宽度的任何信息，因此我担心开箱即用的功能可能不受支持。 每当我想更改宽度时，是否只需要创建一个新的Chart对象并替换DOM上的canvas元素？ 那样很不幸，因为我想保留内置的update函数附带的漂亮的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元素btw。

---

小提琴-http: //jsfiddle.net/ja8cxybf/