【问题标题】:Proper format of json for Highchart.js with multiple series具有多个系列的 Highchart.js 的正确 json 格式
【发布时间】:2026-02-20 21:45:02
【问题描述】:

我有 Higcharts 美元货币的示例 json 数据: https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json

所以我只在数据中添加了一个值,没有显示在图表中。

[
    [
        1167609600000,
        50,
        30
    ],
    [
        1167609600001,
        60,
        40
    ],
    [
        1167609600002,
        70,
        50
    ]
]

我的代码:

function myFunction() { Highcharts.getJSON(
'http://192.168.0.157/log1.json',函数(数据){

Highcharts.chart('container', {
  chart: {
    zoomType: 'x',        backgroundColor:"#e7ecea" 
  },
  title: {
    text: 'Pomiary'
  },
  subtitle: {
    text: document.ontouchstart === undefined ?
      'select' : 'Pinch the chart to zoom in'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Exchange rate'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    area: {
      fillColor: {

        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
      },
      marker: {
        radius: 2
      },
      lineWidth: 1,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      threshold: null
    }
  },

  series: [{
    type: 'area',
    name: 'speed',
    data: data
  },    {
    type: 'area',
    name: 'speed2',
    data: data
  }]
});   } );

};

如何添加下一个系列?

【问题讨论】:

    标签: javascript json charts highcharts series


    【解决方案1】:

    最简单的方法是使用keys属性:

    series: [{
      data: data
    }, {
      keys: ['x', 'someValue', 'y'],
      data: data
    }]
    

    现场演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4797/

    API 参考: https://api.highcharts.com/highcharts/series.line.keys

    【讨论】: