我正在尝试在网页上开始使用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','F','S','S'],datasets: [{
label: 'apples',data: [12,19,3,17,6,7],backgroundColor: "rgba(153,255,51,0.4)"
},{
label: 'oranges',data: [2,20,22,5,2,10],backgroundColor: "rgba(255,153,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)。