将响应选项设置为 true 时，Chartjs 不呈现图表

Question

我的报告使用的是 chartjs 1.02 版。我从文档中获取示例来呈现一个简单的折线图。当我体验这些选项时，我意识到有一个非常有用的选项（responsive）可以在调整浏览器大小时自动调整图表大小。在我将此选项放入选项对象之前，可以呈现图表并且一切正常。添加此 "responsive" 选项后，图表停止呈现。我想知道这个选项是否适用于折线图，或者这个选项必须依赖于我错过的其他选项。

这是我的代码

           var data = {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'My First dataset',
                        fillColor: 'rgba(220,220,220,0)',
                        strokeColor: '#2D7CFA',
                        pointColor: '#FFFFFF',
                        pointStrokeColor: '#2D7CFA',
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: 'rgba(220,220,220,1)',
                        data: [65, 59, 80, 81, 56, 55, 40]
                    }
                ]
            };
            var options = {
                scaleFontColor: '#FFF',
                scaleLineColor: '#456A82',
                scaleFontSize: 10,
                tooltipFontSize: 10,
                tooltipTitleFontSize: 10,
                bezierCurve: false,
                pointDotStrokeWidth: 3,
                responsive: true // this breaks the chart
            };
            var ctx = document.getElementById('myChart').getContext('2d');
            var myLineChart = new Chart(ctx).Line(data, options);

Answer 1

设置响应选项后，canvas 的宽度由其父项的宽度决定。因此，请确保父级具有非 0 的 clientWidth。例如，如果父项浮动并相对定位，而子项 canvas 绝对定位，则它的宽度会折叠为 0，导致 canvas 没有大小。可能还有其他方法会发生这种情况，但要解决您的问题，您只需要确保父级具有它自己的宽度（也可以是 %）。

将响应选项设置为 true 时，Chartjs 不呈现图表

Chartjs does not render chart when set responsive option to true

javascript

chart.js