Question

我正在绘制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绘制图表。

Answer 1

好像您在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>

canvasjs.min.js：545未捕获的TypeError：无法读取工程图CANVASJS上未定义的属性'visible'

1 个答案: