график с использованием chart.js не рендерится в расширении Chrome - PullRequest
Новая
       17

график с использованием chart.js не рендерится в расширении Chrome

0 голосов
/ 26 июня 2019

Я пытаюсь визуализировать свои данные с помощью линейных диаграмм с помощью chart.js.Когда я использую тот же код на обычной веб-странице HTML, он работает нормально.Но тот же код в расширении chrome popup.html - ничего не рендерит.Нет ошибокПримечание: я получил файл Chart.bundle.min.js через процесс сборки, упомянутый на официальном сайте https://www.chartjs.org/

, вот мой код 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
            });
    }
 )
...