第一次使用这个插件,一引入就出问题了,代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<script type="text/javascript" src="../js/chart.min.js"></script>-->
<script src="../js/Chart.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
//new Chart(ctx).PolarArea(data,options);
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}]
}
new Chart(ctx).PolarArea(data,options);//一调用就报错 Uncaught ReferenceError: options is not defined
</script>
</body>
</html>
这个参数options是代表什么?怎么解决这个问题?
ps:这个问题是不是很low啊?为什么网上都没有的?这个options参数没有被这个插件封装?我第一次用着插件,也没去看他的源代码,大神们不吝赐教
如果我按照网上某些demo的方式,将这个options参数设为图表默认参数这个对象,则:
var ctx = document.getElementById("myChart").getContext("2d");
var defaults = {
scaleStartValue :null, // Y 轴的起始值
scaleLineColor : "rgba(0,0,0,.1)", // Y/X轴的颜色
... //其他的一些设置
}
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}]
}
new Chart(ctx).PolarArea(data,defaults); //报错:Uncaught TypeError: (intermediate value).PolarArea is not a function
我去,这是要坑死人的节奏啊,到底是哪里的问题?
怪我咯2017-04-11 09:49:29
这个 option 是指你的数据 比如这样
option = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高气温','最低气温']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'最高气温',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};