Javascript 将响应选项设置为true时,Chartjs不会呈现图表
我的报告使用的是chartjs 1.02版。我从文档中抓取了一个示例来呈现一个简单的折线图。当我体验这些选项时,我意识到有一个非常有用的选项(responsive)可以在调整浏览器大小时自动调整图表大小。在我将此选项放入option对象之前,可以呈现图表,并且一切正常。添加此“响应”选项后,图表将停止渲染。我想知道这个选项是否适用于折线图,或者这个选项必须依赖于我错过的其他选项 这是我的密码Javascript 将响应选项设置为true时,Chartjs不会呈现图表,javascript,chart.js,Javascript,Chart.js,我的报告使用的是chartjs 1.02版。我从文档中抓取了一个示例来呈现一个简单的折线图。当我体验这些选项时,我意识到有一个非常有用的选项(responsive)可以在调整浏览器大小时自动调整图表大小。在我将此选项放入option对象之前,可以呈现图表,并且一切正常。添加此“响应”选项后,图表将停止渲染。我想知道这个选项是否适用于折线图,或者这个选项必须依赖于我错过的其他选项 这是我的密码 var data = { labels: ['Ja
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);
设置响应选项时,画布的宽度由其父画布的宽度驱动。因此,请确保父项具有非0 clientWidth。例如,如果父画布浮动并相对定位,而子画布绝对定位,则其宽度将塌陷为0,从而导致画布没有大小。这可能有其他的方法,但要解决您的问题,您只需要确保父对象具有自己的宽度(也可以是%)。有人知道如何确保父对象具有非零的clientWidth吗?我尝试过在css中设置样式宽度:100%和显示:块,但在绘制图表之前,它仍然是零。