我正在绘制canvasJS堆积的条形图,但是它没有显示任何图形,反而给了我一个错误“ canvasjs.min.js:545 Uncaught TypeError:无法读取未定义的属性” visible“
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Composition of Internet Traffic in North America"
},
axisX: {
intervalType: "year",
valueFormatString: "YYYY-MM",
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "stackedColumn100",
name: "Real-Time",
showInLegend: true,
xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},{x: new Date(2018,10,06),y:0},{x: new Date(2018,10,08),y:215},{x: new Date(2018,10,09),y:51}]
},
{
type: "stackedColumn100",
name: "Web Browsing",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},{x: new Date(2018,10,06),y:0},{x: new Date(2018,10,08),y:0},{x: new Date(2018,10,09),y:0},{x: new Date(2018,10,10),y:0} ]
},
{
type: "stackedColumn100-MM",
name: "File Sharing",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:1},{x: new Date(2018,10,06),y:0},{x: new Date(2018,10,08),y:0},{x: new Date(2018,10,09),y:0},{x: new Date(2018,10,10),y:0}]
},
{
type: "stackedColumn100",
name: "Others",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},{x: new Date(2018,10,06),y:14},{x: new Date(2018,10,08),y:86},{x: new Date(2018,10,09),y:171},{x: new Date(2018,10,10),y:112} ]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
此处仅显示标题。没什么,这是第一次使用canvasJS绘制图表。
答案 0 :(得分:0)
好像您在StackedColumn100-MM
类型中有错字。
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Composition of Internet Traffic in North America"
},
axisX: {
intervalType: "year",
valueFormatString: "YYYY-MM",
},
axisY: {
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
reversed: true,
verticalAlign: "center",
horizontalAlign: "right"
},
data: [{
type: "stackedColumn100",
name: "Real-Time",
showInLegend: true,
xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},
{x: new Date(2018,10,06),y:0},
{x: new Date(2018,10,08),y:215},
{x: new Date(2018,10,09),y:51}
]
},
{
type: "stackedColumn100",
name: "Web Browsing",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},
{x: new Date(2018,10,06),y:0},
{x: new Date(2018,10,08),y:0},
{x: new Date(2018,10,09),y:0},
{x: new Date(2018,10,10),y:0}
]
},/**/
{
type: "stackedColumn100",
name: "File Sharing",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:1},
{x: new Date(2018,10,06),y:0},
{x: new Date(2018,10,08),y:0},
{x: new Date(2018,10,09),y:0},
{x: new Date(2018,10,10),y:0}
]
},/**/
{
type: "stackedColumn100",
name: "Others",
showInLegend: true,
// xValueFormatString: "YYYY-MM",
yValueFormatString: "#,##0\"%\"",
dataPoints: [
{x: new Date(2018,10,01),y:0},
{x: new Date(2018,10,06),y:14},
{x: new Date(2018,10,08),y:86},
{x: new Date(2018,10,09),y:171},
{x: new Date(2018,10,10),y:112}
]
}/**/]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>