如何将API返回的JSON格式转换为K线图适配格式以兼容原有代码？

原有JSON格式（教程要求） #

原有格式中x为毫秒级时间戳，y是按[开盘价, 最高价, 最低价, 收盘价]顺序排列的数值数组

{
    "x": 1483381800000,
    "y": [
        65.860001,
        66.139999,
        64.599998,
        65.400002
    ]
}

API返回的JSON格式 #

{
    "datetime": "2017-01-03",
    "open": "65.86000",
    "high": "66.14000",
    "low": "64.60000",
    "close": "65.40000",
    "volume": "9519838"
}

当前解析函数及完整代码 #

现有解析函数 #

function parseData(result) {
    console.log(result.values);
    for (var i = 0; i < result.length; i++) {
        dps.push({
            x: result[i].datetime,
            y: result[i].open
        });
    }
    chart.render();
}

完整HTML代码 #

<html>
<head>
<script>
window.onload = function() {

var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: true,
exportEnabled: true,
title: {
    text: (ticker+" Stock Price")
},

axisX: {
    valueFormatString: "DD MMM"
},
axisY: {
    title: "Price",
    interval: 5,
    prefix: "$"
},
data: [{
    type: "candlestick",
    name: ticker+" Stock Price",
    showInLegend: true,
    yValueFormatString: "$##0.00",
    xValueType: "dateTime",
    dataPoints: dps
}]
});

$.getJSON("https://api.twelvedata.com/time_series?start_date=2020-05-06&outputsize=5&symbol="+ticker+"&interval=1day&apikey="+TDKEY, parseData);

function parseData(result) {
    console.log(result.values);
    for (var i = 0; i < result.length; i++) {
        dps.push({
            x: result[i].datetime,
            y: result[i].open
        });
        }
     chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"> 
</div>
<script type="text/javascript" 
src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"> 
</script>
<script type="text/javascript" 
src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"> 
</script>
</body>
</html>

解决方案 #

只需修改parseData函数，完成两个核心转换并修正遍历对象：

1. 把API返回的日期字符串转为毫秒级时间戳
2. 将字符串格式的价格转为数字，按[开盘, 最高, 最低, 收盘]顺序组成数组
3. 修正遍历目标：API返回的数据数组是result.values，而非result本身

修改后的解析函数如下：

function parseData(result) {
    console.log(result.values);
    for (var i = 0; i < result.values.length; i++) {
        var item = result.values[i];
        dps.push({
            // 日期转毫秒时间戳
            x: new Date(item.datetime).getTime(),
            // 价格字符串转数字并组成数组
            y: [
                parseFloat(item.open),
                parseFloat(item.high),
                parseFloat(item.low),
                parseFloat(item.close)
            ]
        });
    }
    chart.render();
}

关键说明 #

• new Date(item.datetime).getTime()：适配CanvasJS要求的毫秒级时间戳格式
• parseFloat()：将API返回的字符串价格转为数值类型，确保K线图能正确计算和渲染
• 遍历result.values：API返回的实际数据集合嵌套在values字段内，之前的代码错误遍历了外层对象

内容的提问来源于stack exchange，提问作者64 bit