javascript - 问题配置 Highcharts/Highstock 烛台 (React JS)

问题描述

我已经尝试按照我想要的方式配置图表好几天了，但没有成功..

Candlestick 图表应该显示最后 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

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

谢谢

标签： javascriptreactjshighcharts

javascript - 问题配置 Highcharts/Highstock 烛台 (React JS)

问题描述

解决方案

推荐阅读