如何使用 Highcharts React 为同一个 XAxis 创建多行图表？

Question

我有一个包含日期值和其他 3 个值的数据集。例如：

{
    "minimum": "71",
    "maximum": "74",
    "meanAverage": "72",
    "dateTime": "2018-03-28T13:46:00"
},
{
    "minimum": "57",
    "maximum": "87",
    "meanAverage": "71",
    "dateTime": "2018-03-28T18:00:01"
},

我想使用 react highcharts 创建一个图表，x 轴上有日期，然后 y 轴上有 3 条线显示所有日期对应的 3 个值。

到目前为止，我想使用 3 个不同的数组传递给 series.data。每个数组都有 x 值（日期），然后是 y 值。对于最低要求，它将是：

['2018-03-28T13:46:00', '71']
['2018-03-28T18:00:01', '57']
...

并且在 options 对象中，我会有这样的东西：

series: [
          {
            data: minimuns
          },
          {
            data: maximuns
          },
          {
            data: meanAverages
          },
        ]

但这不起作用，我在查找正确执行此操作的信息时遇到了一些问题。有帮助吗？

Answer 1

您需要将 json 对象解析为合适的数据格式。

有关可接受的数据格式，请参阅文档： https://api.highcharts.com/highcharts/series.line.data

注意，y 值应该是一个数字。

示例配置：

const json = '[{"minimum": 71, "maximum": 74, "meanAverage": 72, "dateTime": "2018-03-28T13:46:00"}, {"minimum": 57,"maximum": 87, "meanAverage": 71, "dateTime": "2018-03-28T18:00:01"}]',

  parsed = JSON.parse(json);

const minimum = [];
parsed.forEach(data => {
  minimum.push([new Date(data.dateTime).getTime(), data.minimum])
})

const maximum = [];
parsed.forEach(data => {
  maximum.push([new Date(data.dateTime).getTime(), data.maximum])
})

const meanAverage = [];
parsed.forEach(data => {
  meanAverage.push([new Date(data.dateTime).getTime(), data.meanAverage])
})

然后您就可以按预期使用您的数据数组了：

  series: [{
      data: minimum
    },
    {
      data: maximum
    },
    {
      data: meanAverage
    }
  ]

演示： https://jsfiddle.net/BlackLabel/2ncb83eh/

如何使用 Highcharts React 为同一个 XAxis 创建多行图表？

How to use Highcharts React to create chart with multiple lines for same XAxis?

javascript

highcharts

react-highcharts