如何使Chart JS响应？

Question

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

Answer 1

Chart.js有一个属性(响应),您可以在全局或图表级别通过可使图表响应的选项进行配置.请参阅http://www.chartjs.org/docs/#getting-started-global-chart-configuration >响应

// 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选项.