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

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

javascript json

Javascript 以下代码有什么问题？为什么不显示图表,javascript,json,canvasjs,Javascript,Json,Canvasjs,我试图使用外部JSON文件中的canvasjs生成一个线条图。JSON文件由日期、高位、打开、低位、音量和价格组成。需要在图表中显示的是日期、高位、打开和低位这就是我所做的： <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <script> window.onload = function () { var dataPoints1 = []; var data

我试图使用外部JSON文件中的canvasjs生成一个线条图。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轴和标题。没有显示错误消息。

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

var dataPoints1=[]； var dataPoints2=[]； var dataPoints3=[]； var chart=new CanvasJS.chartcontainer{ 标题：{ 文本：数据 }, axisX：{ 标题：日期 }, axisY：[{ 标题：开放，线条颜色：C24642，颜色：C24642， labelFontColor:C24642，标题字体颜色：C24642 },{ 标题：高，线条颜色：369EAD， tickColor:369EAD， labelFontColor:369EAD，标题字体颜色：369EAD }], axisY2：{ 标题：低，线条颜色：7F6084，颜色：7F6084， labelFontColor:7F6084，标题字体颜色：7F6084 }, 工具提示：{ 分享：真的 }, 图例：{ 游标：指针， itemclick:toggleDataSeries }, 数据：[{ 类型：行，姓名:High,，颜色：369EAD， showInLegend：是的， axisYIndex:1，数据点：数据点1 },{ 类型：行，姓名:Open,，颜色：C24642， axisYIndex:0， showInLegend：是的，数据点：数据点2 },{ 类型：行，姓名:Low,，颜色：7F6084， axisYType:secondary， showInLegend：是的，数据点：数据点3 }] }; $.getJSONhttps://api.myjson.com/bins/1gfuo7，回调；函数回调数据{ 对于变量i=0；i您缺少一个标记的结束符。我要做的第一件事是检查浏览器的网络控制台，确保对q_data.json的请求有效并返回有效的json。您还可以将错误处理程序添加到$.getJSON，例如fail…args=>console.error。。。args@Santi这是我在这里复制和整理代码时的错误。您能提供q_data.json包含的示例吗？我还应该检查什么？我在$.getJSON中添加了一个错误处理程序，它返回成功。@您说得对！它工作得很好！感谢您的帮助，欢迎使用Stack Overflow。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受：