我正在尝试在网页上开始使用Chart.js。该网页位于也运行zabbix的服务器上。
这是我要运行的简单页面的代码：
<html>
<head>
<script src="./Chart.js"></script>
</head>
<body>
<h1>ChartTest.php</h1>
<canvas id="myChart" class="nogroup" width="400px" height="400px" style="width:400px; height:400px;"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: [2, 20, 22, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
</script>
</body>
</html>
相当简单，对吧？我正在尝试在400 x 400像素的画布上绘制图表。但是，当我在浏览器中查看页面时，会看到一个巨大的图表，该图表大于屏幕的可视区域。当我使用chrome的inspect元素功能检查代码时，我看到很多样式表信息都覆盖了我的画布尺寸。它似乎是从“ gr__zabbix_myservername_ext”类继承一个名为“ chartjs-render-monitor”的类。
<canvas id="myChart" class="nogroup chartjs-render-monitor" width="1079" height="1079" style="width: 1079px; height: 1079px; display: block;"></canvas>
仅通过类的名称，我认为这与zabbix有关。如何找到导致这种继承的css文件，以便可以添加“ nogroup”类或某些东西来替代此行为？我找不到此css文件在文件系统中的位置...（我使用的是Ubuntu 16.04）。
确定，经过一番研究，我意识到导致此问题的代码与Zabbix无关。它实际上是Chart.js的功能。显然，除非在定义图表时将“响应”选项设置为“假”，否则默认情况下，库会缩放图表以适合浏览器的可视宽度。因此，我将“ myChart”变量定义更改为：
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: [2, 20, 22, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
},
options: {
responsive: false
}
});
这是控制此行为的选项部分中的“响应：错误”。因此，我能够以这种方式解决此问题。谢谢大家的评论，下次我将尝试rtfm！