如何使Chart JS响应？

Question

我正在使用Chart.js和Twitter Bootstrap模板。如果我没有提到Canvas的高度和宽度，则图表的大小不正确。但是如果我指定宽度和高度，那么图表就没有响应。我该如何解决这个问题？

Answer 1

Chart.js有一个属性（响应），您可以在全局或图表级别通过可使图表响应的选项进行配置。见http://www.chartjs.org/docs/#getting-started-global-chart-configuration＆gt;响应

// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,

true使其响应。 false（默认值）使其无响应。

示例用法（仅限相关部分，请参阅CodePen进行全面检查）

var ctx = $("#bar").get(0).getContext("2d");
var myChart = new Chart(ctx).Bar(barData, {
  responsive: true
});

CodePen - http://codepen.io/anon/pen/bdrGVx

如果你想保持宽度与高度的比例，你可能还想检查一下maintainAspectRatio选项。