canvasjs 和 coingecko api 数据答案

【问题标题】：canvasjs and coingecko api datacanvasjs 和 coingecko api 数据
【发布时间】：2018-07-30 00:47:15
【问题描述】：

不熟悉使用外部 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>

【问题讨论】：

标签： json charts canvasjs coingecko

【解决方案1】：

API 返回：

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

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

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

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

【讨论】：