如何使Chart JS响应？ [英] How to make Chart JS responsive?

问题描述

我正在将Chart.js与Twitter Bootstrap模板一起使用。如果我没有提及画布的高度和宽度，则图表的尺寸不正确。但是，如果我指定宽度和高度，则图表将没有响应。我该如何解决这个问题？

I am using Chart.js with Twitter Bootstrap template. The Charts are not sized correctly if I don't mention a height and width for Canvas. But if I specify width and height then the charts are not responsive. How can I solve this issue?

推荐答案

Chart.js具有可在全局或图表上配置的属性（响应式）通过使图表具有响应性的选项进行级别调整。请参见 http://www.chartjs.org/docs/#getting-开始全局图表配置>响应

Chart.js has a property (responsive) that you can configure at the global or chart level via options that will make the chart responsive. See http://www.chartjs.org/docs/#getting-started-global-chart-configuration > responsive

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

true使其具有响应性。

true makes it responsive. false (default) makes it non-responsive.

示例用法（仅相关部分，请查看CodePen中的完整考试）

Example usage (only the relevant part, check out the CodePen for the full exam)

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

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

如果可能，您可能还需要检出maintenanceAspectRatio选项您要保持宽高比。

You might also want to check out the maintainAspectRatio option, if you want to maintain the ratio of width to height.

这篇关于如何使Chart JS响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！