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元素吗？那将是不幸的，因为我想保留内置更新功能附带的漂亮的Chart.js动画。

Answer 1

而不是更改barFill.chart.canvas.width。更改barFill。比例 .width。

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/

是否可以更新chart.js中图表的宽度？

1 个答案: