试图在 Highcharts 中输出 json 值答案

【问题标题】：trying to output the json value in Highcharts试图在 Highcharts 中输出 json 值
【发布时间】：2022-01-22 14:59:49
【问题描述】：

在 json 数据中使用 value、value_classification 和 timestamp 值我正在尝试打印为 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 演示 › 实心量规 https://www.highcharts.com/demo/gauge-solid

到目前为止我尝试过的代码如下。

HTML

<div id="container-speed" class="chart-container"></div>

JAVASCRIPT


$(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>'
                }
              }]

            }));

    });
});

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

提示：检查是否处理过的数据输出。

错误：循环 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);
});

【讨论】：

感谢提示。正如您所写，它也在console.log中输出为空值。你有什么问题？
请转至ourcodeworld.com/articles/read/180/… 以上将帮助您找到您的错误。另一个提示： var obj = {}; obj.length 不会像我们在数组中那样给出它的长度。

【解决方案2】：

我使用这种方法复制您的代码并接收数据：

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/

【讨论】：