Question

我正在尝试使用来自外部JSON文件的canvas.js绘制折线图。 JSON文件包含日期，最高价，开盘价，最低价，成交量和价格。图表中需要显示的是“日期”，“高”，“开放”和“低”。

这就是我所做的：

<!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轴和图形标题。没有显示错误消息。

Answer 1

CanvasJS仅支持number and date-time in x-values，而x-value是您共享的示例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>

以下代码有什么问题？为什么不显示图形

1 个答案: