Блог

Я пытаюсь обновить ряд данных с помощью кнопки обновления, предоставив новый ряд. В результате новые ряды будут отображаться вместе со старыми рядами.

И после построения нового ряда значения по оси X проясняются. Здесь я прилагаю фрагмент кода, пожалуйста, посмотрите.

Конфигурация начального состояния:

  this.state = {
  chartOptions: {
    credits: {
      enabled: false,
    },
    chart: {
      type: 'spline',
    },

    title: {
      text: 'Chart',
    },
    plotOptions: {
      series: {
        shadow: false,
        marker: {
          enabled: false,
        },
      },
    },
    xAxis: {
      gridLineWidth: 1,
      type: 'datetime',
      lineColor: '#999',
      lineWidth: 1,

      title: {
        text: 'Time',
        style: {
          color: '#000',
        },
      },
    },
    yAxis: [
      {
          title: {
          text: 'Value',
        },

        gridLineWidth: 1,

        lineWidth: 1,
        opposite: true,
        

        plotLines: [
          {
            color: '#55c2ea',
            width: 2,
            value: props.data[0][1], // Need to set this probably as a var.
            label: {
              text: props.data[0][1],
              textAlign: 'left',
              verticalAlign: 'middle',
              style: {
                color: '#55c2ea',
                fontSize: 16,
                borderWidth: 1,
                backgroundColor: '#55c2ea',
                borderColor: '#55c2ea',
              },
              x: 330,
            },
          },
        ],
        accessibility: {
          enabled: true,
        },
        opposite: true,
      },
    ],
    time: {
      useUTC: false
    },
    series: [
      {
        showInLegend: false,

        color: '#FF0000',
        data: props.data.slice(0, props.tradingInterval),

      },
    ],
  }
};
 

Функция обновления:

 updateSeries = () => {

this.setState({ chartOptions: {
  series: [
    
    { 
      showInLegend: false,
      color: '#FF0000',
      data: this.props.data.slice(0, 15),}
  ]
} })
  
 

}

Код визуализации графика:

 render() {
return (
  <View style={styles.container}>
    <HighchartsReactNative
      styles={styles.chart}
      options={this.state.chartOptions}
    />
    <Button
      title="Refresh"
      onPress={this.updateSeries.bind(this)}/>
  </View>


);
 

}

После обновления график выглядит так

Код компонента класса: https://gist.github.com/cupatil/da00b0ab0866e3a4f9306f0425e92582

Также пробовал этот код с использованием функционального компонента.

Использование кода функционального компонента: https://gist.github.com/cupatil/2fc1862f64f3a511158ced3c6b64d215

Но происходит то же самое, серия изменена, но не может отобразить свойство графика в соответствии с изображением. Кроме того, данные по оси X не рассчитаны должным образом.

Данные серии примеров, которые я использую:

[ { x: 1607883000000, y: 1.6093 },{ x: 1607882940000, y: 1.6094 },{ x: 1607882880000, y: 1.6093 },{ x: 1607882820000, y: 1.6094 },{ x: 1607882760000, y: 1.6094 },{ x: 1607882700000, y: 1.6094 },{ x: 1607882640000, y: 1.6095 },{ x: 1607882580000, y: 1.6094 },{ x: 1607882520000, y: 1.6095 },{ x: 1607882460000, y: 1.6093 },{ x: 1607882400000, y: 1.6095 },{ x: 1607882340000, y: 1.6095 },{ x: 1607882280000, y: 1.6088 },{ x: 1607882220000, y: 1.6096 },{ x: 1607882160000, y: 1.6095 },{ x: 1607882100000, y: 1.6096 },{ x: 1607882040000, y: 1.6096 },{ x: 1607881980000, y: 1.6096 },{ x: 1607881920000, y: 1.6097 },{ x: 1607881860000, y: 1.6097 },{ x: 1607881800000, y: 1.6099 },{ x: 1607881740000, y: 1.6101 },{ x: 1607881680000, y: 1.61 },{ x: 1607881620000, y: 1.61 },{ x: 1607881560000, y: 1.6099 },{ x: 1607881500000, y: 1.6099 },{ x: 1607881440000, y: 1.6099 },{ x: 1607881380000, y: 1.6098 },{ x: 1607881320000, y: 1.6099 },{ x: 1607881260000, y: 1.6098 },{ x: 1607881200000, y: 1.6098 },{ x: 1607881140000, y: 1.6098 },{ x: 1607881080000, y: 1.6099 },{ x: 1607881020000, y: 1.6098 },{ x: 1607880960000, y: 1.6099 },{ x: 1607880900000, y: 1.6098 },{ x: 1607880840000, y: 1.6098 },{ x: 1607880780000, y: 1.6099 },{ x: 1607880720000, y: 1.6098 },{ x: 1607880660000, y: 1.6096 },{ x: 1607880600000, y: 1.6097 },{ x: 1607880540000, y: 1.61 },{ x: 1607880480000, y: 1.6099 },{ x: 1607880420000, y: 1.6101 },{ x: 1607880360000, y: 1.61 },{ x: 1607880300000, y: 1.6101 },{ x: 1607880240000, y: 1.61 },{ x: 1607880180000, y: 1.6101 },{ x: 1607880120000, y: 1.6101 },{ x: 1607880060000, y: 1.61 },{ x: 1607880000000, y: 1.6099 },{ x: 1607879940000, y: 1.6099 },{ x: 1607879880000, y: 1.6098 },{ x: 1607879820000, y: 1.61 },{ x: 1607879760000, y: 1.6097 },{ x: 1607879700000, y: 1.6098 },{ x: 1607879640000, y: 1.6096 },{ x: 1607879580000, y: 1.6096 },{ x: 1607879520000, y: 1.6097 },{ x: 1607879460000, y: 1.6096 },{ x: 1607879400000, y: 1.6095 } ]

Хорошо, я делал это наоборот, и именно поэтому я не смог воспроизвести описанную ошибку. Что ж, теперь я вижу проблему, но, как я и думал, она вызвана передачей не отсортированных (в порядке возрастания x) данных, что вы можете заметить после открытия консоли браузера и увидеть ошибку Highcharts # 15.

Чтобы заставить его работать правильно, вам всегда нужно убедиться, что вы передаете данные, которые отсортированы в порядке возрастания (значения точки x увеличиваются вместе с индексом элемента массива).

Итак, чтобы подвести итог, отсортируйте массив:

 [

  // data here

].sort((a, b) => a.x - b.x)
 

затем измените способ подготовки (среза) исходных данных:

 data.slice(data.length - 1 - 15, data.length - 1)
 

и теперь он должен работать так, как ожидалось.

Живые примеры:

• Без реакции: https://jsfiddle.net/BlackLabel/37cdryg9 /
• С помощью React: https://codesandbox.io/s/highcharts-react-demo-forked-q3whu