如何使用Highcharts React创建同一X轴的多行图表？

m0rkklqb 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(157)

我有一个数据集，其中包含一个日期值和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
          },
        ]

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

highcharts

来源：https://stackoverflow.com/questions/72105113/how-to-use-highcharts-react-to-create-chart-with-multiple-lines-for-same-xaxis

1条答案

按热度按时间

crcmnpdw1#

您需要将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/

赞(0）回复(0）举报 2022-11-10

我来回答

如何使用Highcharts React创建同一X轴的多行图表？

1条答案

相关问题

热门标签

最新问答