代码之家 › 专栏 › 技术社区 › Loofer

如何在高图表上扩展x轴?

highcharts react-native

1

Loofer · 技术社区 · 6 年前

在下面的图片中,每个组都有相同的结果,因此您可以看到N和P从第一组中删除,S和Mg从最后一组中删除。

  const conf = {
      chart: {
        type: "column",
        animation: false,
        marginRight: 10,
        dateFormat: "dd/mm/YYYY"
      },
      title: {
        text: "Spread Events"
      },
      xAxis: {
        type: "datetime",
        tickPixelInterval: 50
      },
      yAxis: {
        title: {
          text: "Spread"
        },
        plotLines: [
          {
            value: 0,
            width: 1,
            color: "#808080"
          }
        ]
      },
      legend: {
        enabled: true
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0
        }
      },
      series: this.state.graphData
    };

graphData 从这个例子

[
  {
    "name": "N",
    "data": [[1559669642443, 300], [1559343600000, 300], [1559257200000, 300]]
  },
  {
    "name": "P",
    "data": [[1559669642443, 160], [1559343600000, 160], [1559257200000, 160]]
  },
  {
    "name": "K",
    "data": [[1559669642443, 470], [1559343600000, 470], [1559257200000, 470]]
  },
  {
    "name": "S",
    "data": [[1559669642443, 120], [1559343600000, 120], [1559257200000, 120]]
  },
  {
    "name": "Mg",
    "data": [[1559669642443, 90], [1559343600000, 90], [1559257200000, 90]]
  }
]

0 回复 | 直到 6 年前

1

ppotaczek 6 年前

你有 Highcharts error #15 在控制台中,这意味着您的数据没有被排序。Highcharts需要按升序X排序的数据:

series: [{
        ...,
        data: [
            [1559257200000, 300],
            [1559343600000, 300],
            [1559669642443, 300]
        ]
    }, ...
]

现场演示: http://jsfiddle.net/BlackLabel/y2rzd65m/