使用 API 创建仪表图

Question

我正在为一个小组项目创建一个仪表板。我的任务是创建一个显示空气质量（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 =

获取（'https://data.climacell.co/v4/timelineslocation=6015453161ce500007685a3e&fields=epaHealthConcern&timesteps=current&units=metric&timezone=Europe/London&apikey=XXXXXXXXXXXXXXXXXX'，选项）

.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", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, 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>

Answer 1

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

您可以做的是将您的生成图脚本包装到一个函数中，然后从您当前正在调用 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
   )}
}

这应该可以解决问题。

使用 API 创建仪表图

Using API to create a gauge chart

javascript

rest

charts

method-call

c3.js