配置Highcharts / Highstock烛台（React JS）的问题

Question

我几天来一直试图以我想要的方式配置图表，但没有成功。.

烛台图表应该显示最后5到6支蜡烛，动态添加数据（此数据出于演示目的是静态的），似乎蜡烛点已正确添加。我使用了一个以动态更新数据为基础的示例（示例中随机生成的数据，看起来效果不错））>

我无法让蜡烛不累积，如果我这样做，我一次只能看到1支。同样由于某种原因，如果我禁用滚动条，我看不到蜡烛。

这里是代码：（功能性React组件）

const daData = [ 
     [  // example for array data
    1582453980000,
    9937.92,
    9937.92,
    9922.76,
    9932.3,
    42.068366,
    1582454039999,
    417690.77735577,
    789,
    22.4836,
    223251.05478902,
    0
  ]  
]
const Chart = props => {
  Highcharts.theme = {
    // some styling
  }

  const options = {
    rangeSelector: {
      selected: 1,
      enabled: false
    },
    chart: {
      animation: true,
      type: 'candlestick',
      events: {
        load () {
          var series = this.series[0]

          let index = -1
          setInterval(function () {
            index++

            series.addPoint(daData[index], true, true)
          }, 1000)
        }
      }
    },
    time: {
      useUTC: false
    },
    title: {
      text: ''
    },
    navigator: {
      enabled: false
    },
    scrollbar: {
      enabled: true
    },
    xAxis: {
      scrollablePlotArea: {
        maxWidth: 1
      },
      // max:5,
      zoomEnabled: true,
      width: '100%',
      range: 10000,
      units: [
        [
          'minute', // unit name
          [1] // allowed multiples
        ]
      ]
    },
    yAxis: {
      title: {
        text: 'PRICE',
        margin: -20,
        style: {
          color: 'white',
          fontWeight: 800,
          opacity: 0.7
        }
      }
    },

    series: [
      {
        step: 'center',
        name: 'test',
        data: (function () {
          var data = [],i

          for (i = 0; i <= daData.length; i += 1) {
            data.push([
              daData[i]
            ])
          }
          return data
        })(),
        type: 'candlestick'

      }
    ]
  }
  Highcharts.setOptions(Highcharts.theme)

  return (
    <div className='chart'>
      <HighchartsReact
        highcharts={Highcharts}
        constructorType={'stockChart'}
        options={options}
      />
    </div>
  )
}
export default Chart
如前所述，我真的不知道自己在做什么。尽管它大部分都有效。 

谢谢

我现在尝试以几天来想要的方式配置图表，但没有成功。.烛台图表应该显示最后5到6支蜡烛，数据是动态添加的（此刻……）>

Answer 1

在xAxis上用max / minRanges解决排序问题