时间戳

首页 > 解决方案 > 以下代码有什么问题？为什么图表不显示

javascript - 以下代码有什么问题？为什么图表不显示

问题描述

我正在尝试使用外部 JSON 文件中的 canvasjs 制作折线图。JSON 文件由 Date、high、open、low、vol 和 price 组成。图表中需要显示的是日期、最高价、开盘价和最低价。

这就是我所做的：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script>

window.onload = function () {
    var dataPoints1 = [];
    var dataPoints2 = [];
    var dataPoints3 = [];

    var chart = new CanvasJS.Chart("chartContainer", {
title:{
    text: "Data"
},
axisX:{
    title:"Date"
},
axisY:[{
    title: "Open",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642"

},
{
    title: "High",
    lineColor: "#369EAD",
    tickColor: "#369EAD",
    labelFontColor: "#369EAD",
    titleFontColor: "#369EAD"
}],
axisY2: {
    title: "Low",
    lineColor: "#7F6084",
    tickColor: "#7F6084",
    labelFontColor: "#7F6084",
    titleFontColor: "#7F6084"
},
toolTip: {
    shared: true
},
legend: {
    cursor: "pointer",
    itemclick: toggleDataSeries
},
data: [{
    type: "line",
    name: "High",
    color: "#369EAD",
    showInLegend: true,
    axisYIndex: 1,
    dataPoints: dataPoints1
},
{
    type: "line",
    name: "Open",
    color: "#C24642",
    axisYIndex: 0,
    showInLegend: true,
    dataPoints: dataPoints2
},
{
    type: "line",
    name: "Low",
    color: "#7F6084",
    axisYType: "secondary",
    showInLegend: true,
    dataPoints: dataPoints3
}]
});

$.getJSON("q_data.json", callback); 



function callback(data) {   

for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
        x: data[i].Date,
        y: data[i].open
    });
    dataPoints2.push({
        x: data[i].Date,
        y: data[i].high
    });
    dataPoints3.push({
        x: data[i].Date,
        y: data[i].low
    });
}
chart.render(); 
    }


function toggleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
} else {
    e.dataSeries.visible = true;
}
e.chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>
</html>

我希望它显示绘制的折线图，但它只显示图表的 y 轴、x 轴和标题。不显示错误消息。

标签： javascriptjsoncanvasjs

解决方案

CanvasJS 仅支持x 值中的数字和日期时间，而 x 值是您共享的示例 JSON 中的字符串。在解析 JSON 时将其更改为 date-object 应该可以正常工作。

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Data"
  },
  axisX:{
    title:"Date"
  },
  axisY:[{
    title: "Open",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642"

  },{
    title: "High",
    lineColor: "#369EAD",
    tickColor: "#369EAD",
    labelFontColor: "#369EAD",
    titleFontColor: "#369EAD"
  }],
  axisY2: {
    title: "Low",
    lineColor: "#7F6084",
    tickColor: "#7F6084",
    labelFontColor: "#7F6084",
    titleFontColor: "#7F6084"
  },
  toolTip: {
    shared: true
  },
  legend: {
    cursor: "pointer",
    itemclick: toggleDataSeries
  },
  data: [{
    type: "line",
    name: "High",
    color: "#369EAD",
    showInLegend: true,
    axisYIndex: 1,
    dataPoints: dataPoints1
  },{
    type: "line",
    name: "Open",
    color: "#C24642",
    axisYIndex: 0,
    showInLegend: true,
    dataPoints: dataPoints2
  },{
    type: "line",
    name: "Low",
    color: "#7F6084",
    axisYType: "secondary",
    showInLegend: true,
    dataPoints: dataPoints3
  }]
});

$.getJSON("https://api.myjson.com/bins/1gfuo7", callback); 

function callback(data) {
  for (var i = 0; i < data.length; i++) {
    dataPoints1.push({
      x: new Date(data[i].Date),
      y: data[i].open
    });
    dataPoints2.push({
      x: new Date(data[i].Date),
      y: data[i].high
    });
    dataPoints3.push({
      x: new Date(data[i].Date),
      y: data[i].low
    });
  }
  chart.render(); 
}

function toggleDataSeries(e) {
  if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  } else {
    e.dataSeries.visible = true;
  }
  e.chart.render();
}
<div id="chartContainer" style="height: 250px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

推荐阅读