CanvasJs动态图表显示空白数据？

时间：2016-06-29 07:33:43

标签： javascript canvasjs

  

我有一个像下面这样的Json：

{"systimesec":[{"dateTime":"2016-06-29 01:28:58","value":"58.0"},{"dateTime":"2016-06-29 01:29:00","value":"0.0"},{"dateTime":"2016-06-29 01:29:02","value":"2.0"},{"dateTime":"2016-06-29 01:29:04","value":"4.0"},{"dateTime":"2016-06-29 01:29:06","value":"6.0"},{"dateTime":"2016-06-29 01:29:08","value":"8.0"},{"dateTime":"2016-06-29 01:29:10","value":"10.0"},{"dateTime":"2016-06-29 01:29:12","value":"12.0"},{"dateTime":"2016-06-29 01:29:14","value":"14.0"},{"dateTime":"2016-06-29 01:29:16","value":"16.0"},{"dateTime":"2016-06-29 01:29:18","value":"18.0"},{"dateTime":"2016-06-29 01:29:20","value":"20.0"},{"dateTime":"2016-06-29 01:29:22","value":"22.0"},{"dateTime":"2016-06-29 01:29:24","value":"24.0"},{"dateTime":"2016-06-29 01:29:26","value":"26.0"},{"dateTime":"2016-06-29 01:29:28","value":"28.0"},{"dateTime":"2016-06-29 01:29:30","value":"30.0"},{"dateTime":"2016-06-29 01:29:32","value":"32.0"},{"dateTime":"2016-06-29 01:29:34","value":"34.0"},{"dateTime":"2016-06-29 01:29:36","value":"36.0"},{"dateTime":"2016-06-29 01:29:38","value":"38.0"},{"dateTime":"2016-06-29 01:29:40","value":"40.0"},{"dateTime":"2016-06-29 01:29:42","value":"42.0"},{"dateTime":"2016-06-29 01:29:44","value":"44.0"},{"dateTime":"2016-06-29 01:29:46","value":"46.0"},{"dateTime":"2016-06-29 01:29:48","value":"48.0"},{"dateTime":"2016-06-29 01:29:50","value":"50.0"},{"dateTime":"2016-06-29 01:29:52","value":"52.0"},{"dateTime":"2016-06-29 01:29:54","value":"54.0"},{"dateTime":"2016-06-29 01:29:56","value":"56.0"},{"dateTime":"2016-06-29 01:29:58","value":"58.0"}],"sysperfcputotal":[{"dateTime":"2016-06-29 01:28:59","value":"20.0"},{"dateTime":"2016-06-29 01:29:01","value":"12.0"},{"dateTime":"2016-06-29 01:29:03","value":"7.0"},{"dateTime":"2016-06-29 01:29:05","value":"9.0"},{"dateTime":"2016-06-29 01:29:07","value":"12.0"},{"dateTime":"2016-06-29 01:29:09","value":"15.0"},{"dateTime":"2016-06-29 01:29:11","value":"18.0"},{"dateTime":"2016-06-29 01:29:13","value":"9.0"},{"dateTime":"2016-06-29 01:29:15","value":"5.0"},{"dateTime":"2016-06-29 01:29:17","value":"12.0"},{"dateTime":"2016-06-29 01:29:19","value":"34.0"},{"dateTime":"2016-06-29 01:29:21","value":"22.0"},{"dateTime":"2016-06-29 01:29:23","value":"15.0"},{"dateTime":"2016-06-29 01:29:25","value":"15.0"},{"dateTime":"2016-06-29 01:29:27","value":"8.0"},{"dateTime":"2016-06-29 01:29:29","value":"15.0"},{"dateTime":"2016-06-29 01:29:31","value":"6.0"},{"dateTime":"2016-06-29 01:29:33","value":"14.0"},{"dateTime":"2016-06-29 01:29:35","value":"17.0"},{"dateTime":"2016-06-29 01:29:37","value":"8.0"},{"dateTime":"2016-06-29 01:29:39","value":"4.0"},{"dateTime":"2016-06-29 01:29:41","value":"5.0"},{"dateTime":"2016-06-29 01:29:43","value":"3.0"},{"dateTime":"2016-06-29 01:29:45","value":"5.0"},{"dateTime":"2016-06-29 01:29:47","value":"5.0"},{"dateTime":"2016-06-29 01:29:49","value":"2.0"},{"dateTime":"2016-06-29 01:29:51","value":"9.0"},{"dateTime":"2016-06-29 01:29:53","value":"6.0"},{"dateTime":"2016-06-29 01:29:55","value":"28.0"},{"dateTime":"2016-06-29 01:29:57","value":"18.0"},{"dateTime":"2016-06-29 01:29:59","value":"25.0"}],"sysperfdisktime":[{"dateTime":"2016-06-29 01:28:59","value":"100.0"},{"dateTime":"2016-06-29 01:29:01","value":"100.0"},{"dateTime":"2016-06-29 01:29:03","value":"100.0"},{"dateTime":"2016-06-29 01:29:05","value":"100.0"},{"dateTime":"2016-06-29 01:29:07","value":"100.0"},{"dateTime":"2016-06-29 01:29:09","value":"100.0"},{"dateTime":"2016-06-29 01:29:11","value":"100.0"},{"dateTime":"2016-06-29 01:29:13","value":"100.0"},{"dateTime":"2016-06-29 01:29:15","value":"100.0"},{"dateTime":"2016-06-29 01:29:17","value":"100.0"},{"dateTime":"2016-06-29 01:29:19","value":"100.0"},{"dateTime":"2016-06-29 01:29:21","value":"100.0"},{"dateTime":"2016-06-29 01:29:23","value":"100.0"},{"dateTime":"2016-06-29 01:29:25","value":"100.0"},{"dateTime":"2016-06-29 01:29:27","value":"100.0"},{"dateTime":"2016-06-29 01:29:29","value":"100.0"},{"dateTime":"2016-06-29 01:29:31","value":"100.0"},{"dateTime":"2016-06-29 01:29:33","value":"100.0"},{"dateTime":"2016-06-29 01:29:35","value":"100.0"},{"dateTime":"2016-06-29 01:29:37","value":"100.0"},{"dateTime":"2016-06-29 01:29:39","value":"100.0"},{"dateTime":"2016-06-29 01:29:41","value":"100.0"},{"dateTime":"2016-06-29 01:29:43","value":"100.0"},{"dateTime":"2016-06-29 01:29:45","value":"100.0"},{"dateTime":"2016-06-29 01:29:47","value":"100.0"},{"dateTime":"2016-06-29 01:29:49","value":"100.0"},{"dateTime":"2016-06-29 01:29:51","value":"100.0"},{"dateTime":"2016-06-29 01:29:53","value":"100.0"},{"dateTime":"2016-06-29 01:29:55","value":"100.0"},{"dateTime":"2016-06-29 01:29:57","value":"100.0"},{"dateTime":"2016-06-29 01:29:59","value":"100.0"}]}
  

在前端，我正在使用这样：

<script type="text/javascript">

  var decodeEntities = (function() {
      // this prevents any overhead from creating the object each time
      var element = document.createElement('div');

      function decodeHTMLEntities (str) {
        if(str && typeof str === 'string') {
          // strip script/html tags
          str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
          str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
          element.innerHTML = str;
          str = element.textContent;
          element.textContent = '';
        }

        return str;
      }

      return decodeHTMLEntities;
    })();

  var points_data = JSON.parse(decodeEntities("<%= (data) %>"));


  var points = [];

  for(var i in points_data){
    var p = {"type":"line","showInLegend":"true"};
    p.name = i;
    //alert(p.name);
    p.dataPoints = [];
    for(var j=0; j<points_data[i].length; j++)
    {
        alert(new Date(points_data[i][j].dateTime));
        //alert(points_data[i][j].value);
        p.dataPoints.push({x: new Date(points_data[i][j].dateTime), y: parseFloat(points_data[i][j].value)});
    }
    points.push(p);

  }
  //alert(points);
  window.onload = function () {


    var chart1 = new CanvasJS.Chart("chartContainer1",
    {
           title:{
        text: ""
      },

      axisX:{
        title: "",
        gridThickness: 2,
        interval:5, 
        intervalType: "minute",        
        valueFormatString: "HH:mm:ss", 
        labelAngle: -20
      },
      axisY:{
        title: ""
      },
      data: points

   });

    chart1.render();
  }






  </script>



<body>
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
</body>
  

它在图表中显示标记名称，但不显示三个标记的行   画。   早些时候它正在为我工​​作。   任何人都可以告诉我这是什么问题。

1 个答案:

答案 0 :(得分：1)

如果您的decodeEntities（在处理嵌入数据之后）产生您在此处提到的JSON，则代码应该可以正常工作。这是工作剪辑

＆＃13;
＆＃13; 
var points_data = {
  "systimesec": [{
    "dateTime": "2016-06-29 01:28:58",
    "value": "58.0"
  }, {
    "dateTime": "2016-06-29 01:29:00",
    "value": "0.0"
  }, {
    "dateTime": "2016-06-29 01:29:02",
    "value": "2.0"
  }, {
    "dateTime": "2016-06-29 01:29:04",
    "value": "4.0"
  }, {
    "dateTime": "2016-06-29 01:29:06",
    "value": "6.0"
  }, {
    "dateTime": "2016-06-29 01:29:08",
    "value": "8.0"
  }, {
    "dateTime": "2016-06-29 01:29:10",
    "value": "10.0"
  }, {
    "dateTime": "2016-06-29 01:29:12",
    "value": "12.0"
  }, {
    "dateTime": "2016-06-29 01:29:14",
    "value": "14.0"
  }, {
    "dateTime": "2016-06-29 01:29:16",
    "value": "16.0"
  }, {
    "dateTime": "2016-06-29 01:29:18",
    "value": "18.0"
  }, {
    "dateTime": "2016-06-29 01:29:20",
    "value": "20.0"
  }, {
    "dateTime": "2016-06-29 01:29:22",
    "value": "22.0"
  }, {
    "dateTime": "2016-06-29 01:29:24",
    "value": "24.0"
  }, {
    "dateTime": "2016-06-29 01:29:26",
    "value": "26.0"
  }, {
    "dateTime": "2016-06-29 01:29:28",
    "value": "28.0"
  }, {
    "dateTime": "2016-06-29 01:29:30",
    "value": "30.0"
  }, {
    "dateTime": "2016-06-29 01:29:32",
    "value": "32.0"
  }, {
    "dateTime": "2016-06-29 01:29:34",
    "value": "34.0"
  }, {
    "dateTime": "2016-06-29 01:29:36",
    "value": "36.0"
  }, {
    "dateTime": "2016-06-29 01:29:38",
    "value": "38.0"
  }, {
    "dateTime": "2016-06-29 01:29:40",
    "value": "40.0"
  }, {
    "dateTime": "2016-06-29 01:29:42",
    "value": "42.0"
  }, {
    "dateTime": "2016-06-29 01:29:44",
    "value": "44.0"
  }, {
    "dateTime": "2016-06-29 01:29:46",
    "value": "46.0"
  }, {
    "dateTime": "2016-06-29 01:29:48",
    "value": "48.0"
  }, {
    "dateTime": "2016-06-29 01:29:50",
    "value": "50.0"
  }, {
    "dateTime": "2016-06-29 01:29:52",
    "value": "52.0"
  }, {
    "dateTime": "2016-06-29 01:29:54",
    "value": "54.0"
  }, {
    "dateTime": "2016-06-29 01:29:56",
    "value": "56.0"
  }, {
    "dateTime": "2016-06-29 01:29:58",
    "value": "58.0"
  }],
  "sysperfcputotal": [{
    "dateTime": "2016-06-29 01:28:59",
    "value": "20.0"
  }, {
    "dateTime": "2016-06-29 01:29:01",
    "value": "12.0"
  }, {
    "dateTime": "2016-06-29 01:29:03",
    "value": "7.0"
  }, {
    "dateTime": "2016-06-29 01:29:05",
    "value": "9.0"
  }, {
    "dateTime": "2016-06-29 01:29:07",
    "value": "12.0"
  }, {
    "dateTime": "2016-06-29 01:29:09",
    "value": "15.0"
  }, {
    "dateTime": "2016-06-29 01:29:11",
    "value": "18.0"
  }, {
    "dateTime": "2016-06-29 01:29:13",
    "value": "9.0"
  }, {
    "dateTime": "2016-06-29 01:29:15",
    "value": "5.0"
  }, {
    "dateTime": "2016-06-29 01:29:17",
    "value": "12.0"
  }, {
    "dateTime": "2016-06-29 01:29:19",
    "value": "34.0"
  }, {
    "dateTime": "2016-06-29 01:29:21",
    "value": "22.0"
  }, {
    "dateTime": "2016-06-29 01:29:23",
    "value": "15.0"
  }, {
    "dateTime": "2016-06-29 01:29:25",
    "value": "15.0"
  }, {
    "dateTime": "2016-06-29 01:29:27",
    "value": "8.0"
  }, {
    "dateTime": "2016-06-29 01:29:29",
    "value": "15.0"
  }, {
    "dateTime": "2016-06-29 01:29:31",
    "value": "6.0"
  }, {
    "dateTime": "2016-06-29 01:29:33",
    "value": "14.0"
  }, {
    "dateTime": "2016-06-29 01:29:35",
    "value": "17.0"
  }, {
    "dateTime": "2016-06-29 01:29:37",
    "value": "8.0"
  }, {
    "dateTime": "2016-06-29 01:29:39",
    "value": "4.0"
  }, {
    "dateTime": "2016-06-29 01:29:41",
    "value": "5.0"
  }, {
    "dateTime": "2016-06-29 01:29:43",
    "value": "3.0"
  }, {
    "dateTime": "2016-06-29 01:29:45",
    "value": "5.0"
  }, {
    "dateTime": "2016-06-29 01:29:47",
    "value": "5.0"
  }, {
    "dateTime": "2016-06-29 01:29:49",
    "value": "2.0"
  }, {
    "dateTime": "2016-06-29 01:29:51",
    "value": "9.0"
  }, {
    "dateTime": "2016-06-29 01:29:53",
    "value": "6.0"
  }, {
    "dateTime": "2016-06-29 01:29:55",
    "value": "28.0"
  }, {
    "dateTime": "2016-06-29 01:29:57",
    "value": "18.0"
  }, {
    "dateTime": "2016-06-29 01:29:59",
    "value": "25.0"
  }],
  "sysperfdisktime": [{
    "dateTime": "2016-06-29 01:28:59",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:01",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:03",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:05",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:07",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:09",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:11",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:13",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:15",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:17",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:19",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:21",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:23",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:25",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:27",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:29",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:31",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:33",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:35",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:37",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:39",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:41",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:43",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:45",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:47",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:49",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:51",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:53",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:55",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:57",
    "value": "100.0"
  }, {
    "dateTime": "2016-06-29 01:29:59",
    "value": "100.0"
  }]
};

var points = [];

for (var i in points_data) {
  var p = {
    "type": "line",
    "showInLegend": "true"
  };
  p.name = i;
  //alert(p.name);
  p.dataPoints = [];
  for (var j = 0; j < points_data[i].length; j++) {
    //alert(new Date(points_data[i][j].dateTime));
    //alert(points_data[i][j].value);
    p.dataPoints.push({
      x: new Date(points_data[i][j].dateTime),
      y: parseFloat(points_data[i][j].value)
    });
  }
  points.push(p);

}
//alert(points);
window.onload = function() {


  var chart1 = new CanvasJS.Chart("chartContainer1", {
    title: {
      text: ""
    },

    axisX: {
      title: "",
      gridThickness: 2,
      interval: 5,
      intervalType: "minute",
      valueFormatString: "HH:mm:ss",
      labelAngle: -20
    },
    axisY: {
      title: ""
    },
    data: points

  });

  chart1.render();
}
＆＃13; 
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>
＆＃13;
＆＃13;
＆＃13;

如果仍然无法解决问题。如果共享嵌入数据会很有帮助。

相关问题
最新问题