Question

我正在尝试使用chart.js通过折线图可视化我的数据。当我在普通HTML网页中使用相同的代码时，它可以正常工作。但是chrome扩展程序popup.html中的相同代码-无法呈现任何内容。没有错误。注意：我已经通过官方网站https://www.chartjs.org/

上提到的构建过程获得了Chart.bundle.min.js文件。

这是我的HTML和JS代码：

HTML
=====================
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="jquery.min.js"></script>
        <script src="Chart.bundle.min.js"></script>
        <script src="home.js"></script>
    </head>
    <body>
        <canvas id="myChart"></canvas>        
    </body>
</html>

JS 
============================
$(
    function(){
            var data={
                labels:['20 Jun 19','21 Jun 19','22 Jun 19','23 Jun 19',
                '24 Jun 19','25 Jun 19','26 Jun 19'],
                datasets:[
                    {
                        label:'Visit Count',data:[25,30,12,50,68,18,12],
                        borderWidth:1,
                        backgroundColor:['rgba(253, 227, 167, .6)'],
                        borderColor:['rgba(153, 127, 67, 1)'],
                        pointBorderColor:['rgba(153, 127, 67, 1)'],
                        pointRadius:4
                    },
                    {
                        label:'Time Spent',data: 
  [41.66,71.66,25,130,16.33,164.19,132.37],
                        borderWidth:1,
                        backgroundColor:['rgba(54, 255, 235, 0.2)'],
                        borderColor:['rgba(4, 205, 205, 1)'],
                        pointBorderColor:['rgba(4, 205, 205, 1)'],
                        pointRadius:4
                    }
                ]
            };
            var options={
                scales:{
                    yAxes:[{ticks:{beginAtZero:false}}]
                },
                elements:{
                    line:{tension:0.3}
                }
            };

            var ctx = 
   document.getElementById('myChart').getContext('2d');
            var myLineChart = new Chart(ctx, {
                type: 'line',
                data: data,
                options: options
            });
    }
 )

使用chart.js的折线图未在chrome扩展中呈现

0 个答案: