在 json 資料中使用 value、value_classification 和時間戳值，我試圖將其列印為 Highcharts 的可靠指標。
系列資料中的值作為空白值插入。
有什么問題？
{
"name": "Fear and Greed Index",
"data": [
{
"value": "27",
"value_classification": "Fear",
"timestamp": "21-12-2021",
"time_until_update": "-1639979045"
}
],
"metadata": {
"error": null
}
}
使用該值，我正在嘗試完成 Highcharts 的實測。
Highcharts 演示 ? Solid Gauge https://www.highcharts.com/demo/gauge-solid
到目前為止我嘗試過的代碼如下。
HTML
<div id="container-speed" class="chart-container"></div>
爪哇腳本
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
for (i = 1; i > json.length; i ){
processedData.push(json[i].value);
}
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'test'
}
},
credits: {
enabled: false
},
series: [{
name: 'test',
data: processedData,
dataLabels: {
format:
'<div style="text-align:center">'
'<span style="font-size:25px">{y}</span><br/>'
'<span style="font-size:12px;opacity:0.4">km/h</span>'
'</div>'
}
}]
}));
});
});
uj5u.com熱心網友回復：
提示：檢查processedData 是否輸出一些東西。
錯誤：回圈 json 資料是不正確的，因為回應是一個物件而不是陣列。創建一個 IIFE 并驗證第一部分，然后繼續創建圖表。例如。
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
// wrong
for (i = 1; i > json.length; i ){
processedData.push(json[i].value);
}
});
console.log(processedData);
});
uj5u.com熱心網友回復：
我使用這種方法重現您的代碼并接收資料：
fetch("https://api.alternative.me/fng/?date_format=en")
.then(response => response.json())
.then(output => {
const chartData = output.data.map(d => parseFloat(d.value))
演示：https : //jsfiddle.net/BlackLabel/s1fczwj0/
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/388810.html
標籤：javascript 查询 高图