使用 API 创建仪表图答案

【问题标题】：Using API to create a gauge chart使用 API 创建仪表图
【发布时间】：2021-02-06 17:40:55
【问题描述】：

我正在为一个小组项目创建仪表板。我的任务是创建一个显示空气质量（EPA Health Concern level）的仪表。

我使用 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', 选项)

.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>

【问题讨论】：

标签： javascript rest charts c3.js method-call

【解决方案1】：

您正在从端点返回数据之前生成图表。这意味着当您返回 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
   )}
}

这应该可以解决问题。

【讨论】：