Question

对于使用外部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>

Answer 1

API返回：

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

首先，您需要选择所需的数据，不能将它们混合在一起。

第二，您应该在收到JSON结果之后（在new CanvasJS.Chart主体中，而不是在此之前，创建图表function() {}。目前，不确定图表是否实际上正在获取更新的{ {1}}，或者在创建图表后知道它正在更新。

如果要在创建后更新图表，则需要按照其文档所述执行操作：https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/updating-chart-options/

canvas.js和coingecko api数据

1 个答案: