twitter-bootstrap-3 - 如何使 Chart JS 响应？

Question

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

Answer 1

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

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