当前位置: 代码迷 >> JavaScript >> 将响应选项设置为true时,Chartjs不呈现图表
  详细解决方案

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

热度:70   发布时间:2023-06-05 14:19:18.0

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

这是我的代码

           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);

设置响应选项时,画布的宽度由其父对象的宽度驱动。 因此,请确保父级的clientWidth为非0。 例如,如果父对象浮动且相对放置,而子画布绝对定位,则其宽度折叠为0,导致画布没有尺寸。 可能会有其他方式发生这种情况,但是要解决您的问题,您只需要确保父级拥有自己的宽度(也可以是%)即可。

  相关解决方案