使用 API 创建仪表图

如何解决使用 API 创建仪表图

我正在为一个小组项目创建一个仪表板。我的任务是创建一个显示空气质量（EPA 健康关注级别）的仪表。

我使用了 API (climaCell) 来获取值。响应工作正常，它提供了我需要的值（epaHealthConcern 值）。我已经创建了我想要的图表、颜色编码和标签等。

但是，我似乎无法弄清楚如何将值放入图表数据中以使其显示在仪表中。有没有办法只使用图表中的 API URL？或者我可以在图表的数据部分运行 API 调用吗？只能是0-5的整数，应该没那么难！

    <div id="chart" style="width:100%">


    <script>

function printvalue(AirQuality) {
console.log(AirQuality)
}

const options = {method: 'GET'};

var AirQuality =

fetch('https://data.climacell.co/v4/timelineslocation=6015453161ce500007685a3e&fields=epaHealthConcern&timesteps=current&units=metric&timezone=Europe/London&apikey=XXXXXXXXXXXXXXXXXX',options)

.then(response => response.json())
.then(data => (data.data.timelines[0].intervals[0].values.epaHealthConcern))
.then(AirQuality => printvalue(AirQuality))
.catch(err => console.error(err));

var chart = c3.generate({
 bindto: '#chart',data: {
    columns: [
        ['EPA Concern Level',AirQuality]
    ],type: 'gauge',onclick: function (d,i) { console.log("onclick",d,i); },onmouSEOver: function (d,i) { console.log("onmouSEOver",onmouSEOut: function (d,i) { console.log("onmouSEOut",i); }
},gauge: {
    label: {
        format: function(value,ratio) {
            return value;
        },show: false
    },min: -1,max: 5,units: ' %',width: 39 
},color: {
    pattern: ['#006400','#006400','#8ad106','#ffff00','#ffa500','#ff8c00','#ff0000'],threshold: {
        values: [0,1,2,3,4,5]
    }
},size: {
    height: 180
}
});


</script>

</div>

解决方法

您正在从端点返回数据之前生成图表。这意味着当您返回 epaHealthConcern 时，图表已完成呈现。

你可以做的是将你的 generate-graph 脚本包装成一个函数，然后从你当前调用 printvalue() 的 .then() 调用它

.then(AirQuality => {
   //GENERATE THE CHART HERE AFTER WE HAVE GOT THE DATA
   generateChart(AirQuality);
}).catch(err => console.error(err));

let generateChart = (airData) => {
   c3.generate({
   //ADD C3 CONFIG HERE
   )}
}

这应该可以解决问题。