如何删除到达网页的CSS代码?

我正在尝试在网页上开始使用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)。

xhy_will 回答:如何删除到达网页的CSS代码?

好吧,经过一番研究,我意识到导致此问题的代码与Zabbix无关。它实际上是Chart.js的功能。显然,默认情况下,库会缩放图表以适合浏览器的可视宽度,除非在定义图表时将“响应”选项设置为“假”。因此,我将“ myChart”变量定义更改为:

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)"
      }]
   },options: {
      responsive: false
   }
});

控制该行为的选项部分就是“响应:错误”。因此,我能够以这种方式解决此问题。谢谢大家的评论,下次我将尝试rtfm!

本文链接:https://www.f2er.com/3156489.html

大家都在问