Блог

Я использую chartjs для отображения круговой, радарной и столбчатой диаграммы. Данные отображаются успешно во всех трех случаях. Но круговая диаграмма не отображается. Я получаю следующую ошибку:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

Ниже pie.js index.jade приведены файлы и шаблоны.

 pie.js
    'use strict'

    $(function(){
    var data = [{
            value: 300,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
        }, {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
        }, {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
        }];

        var options = {};
        var ctx = document.getElementById("myChart3");
        $('#myChart3').find('.canvas').first().addClass('active');
        var myLineChart1 = new Chart(ctx).Pie(data);
    });
 

 index.jade
    extends layout
    block extraHeader
        script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js")
        script(src="http://code.jquery.com/jquery-2.1.4.min.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js")


    block content
        .jumbotron
            .container
                p Welcome to #{title} area.
            .container(id="c1")
                canvas(id="myChart2", style="width:200px;height:200px")
            .container(id="c3")
                canvas(id="myChart3", style="width:200px;height:200px")
            .container(id="c2")
                canvas.canvas(id="myChart", style="width:200px;height:200px")

        script(src="/javascripts/charts/radar.js")
        script(src="/javascripts/charts/bar.js")
        script(src="/javascripts/charts/pie.js")
 

myChart2 и myChart используются скриптами гистограмм и радарных диаграмм.

Я пробовал использовать разные версии скрипки и добавлять настройки активного класса для myChart3 .

Как устранить эту ошибку?