我正在使用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
添加设置活动类。
如何解决这个错误?