javascript - 使用 API 创建仪表图
问题描述
我正在为一个小组项目创建一个仪表板。我的任务是创建一个显示空气质量(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×teps=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>
解决方案
您正在从端点返回数据之前生成图表。这意味着当您返回 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
)}
}
这应该够了吧。
推荐阅读
- html - 如何使徽标出现在背景图片上?
- python - Pandas 绘图栏:每隔 n 个 xlabel 显示一次
- apache-spark - 如何计算 pyspark 数据框每一列中的 null、na 和 nan 值
- android - Xamarin 应用程序徽章不适用于 Android 窗体
- swift - 变异结构和重新分配结构之间的性能差异
- javascript - 如何在 D3.js 行的中间绘制箭头
- sql - 如何更新除给定一周(太阳 - 星期六)内创建的最新记录之外的所有记录?
- sql - 如何合并select中调用的函数返回的表?
- android - 使用 Mockito 测试 MVP Android 应用程序
- amazon-web-services - 如何通过 CloudFront 缓存的重定向并改为访问 API 网关?