1

不熟悉使用外部 api 数据绘制图表并且缺乏知识导致我问如何使用 coingeko 图表 api 数据绘制图表？获取 json 格式的 api 数据的链接是： https ://api.coingecko.com/api/v3/coins/ethereum/market_chart?vs_currency=btc&days=30

我使用了这个示例代码并替换了链接但是只有空图表被填充而不绘制任何数据点

<!DOCTYPE HTML>
<html>
<head>
<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/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
    title:{
        text:"Rendering Chart with dataPoints from External JSON"
    },
    data: [{
        type: "line",
        dataPoints : dataPoints,
    }]
});
$.getJSON("https://api.coingecko.com/api/v3/coins/mustangcoin/market_chart?vs_currency=btc&days=max&type=json", function(data) {  
    $.each(data, function(key, value){
        dataPoints.push({x: value[0], y: parseInt(value[1])});
    }); 
    chart.render();
});
}
</script>

</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
4

1 回答 1

0

API 返回：

{
  prices: Array,
  market_caps: Array,
  total_volumes: Array,
}

首先你需要选择你想要的数据，你不能把它们混在一起。

其次，您应该new CanvasJS.Chart在收到 JSON 结果后创建图表（在function() {}正文中，而不是在此之前。现在，不确定图表是否真的得到更新dataPoints，或者在您创建图表后知道它正在更新.

如果你想在创建后更新图表，你需要按照他们的文档所说的去做：https ://canvasjs.com/docs/charts/basics-of-creating-html5-chart/updating-chart-options/

于 2018-07-30T10:01:47.887 回答