問題配置 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

如前所述，我真的不知道我在做什么。 它主要工作雖然。

謝謝

Answer 1

sorta 用 xAxis 上的 max/minRanges 解決