Highchart:中断y轴在react应用中不起作用,但在js小提琴中起作用

问题描述 投票:0回答:1
在js-fiddle和react app中使用相同的选项y轴中断在react app中不起作用,但在js-fiddle中工作正常。我正在使用的highchart版本是7.2.1[在此处输入链接描述] [1] jsfiddle,其中break在起作用

Highcharts.chart('container', {
  chart: {
    height: 250,
    animation: false,
    borderColor: '#EFF3F5',
    plotBorderColor: '#EFF3F5',
    plotBorderWidth: 1,
    style: {

    },
    marginLeft: undefined,
  },
  legend: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  title: {
    text: '',
  },
  subtitle: {
    text: '',
  },
  xAxis: [{
    categories: [],
    type: 'datetime',
    crosshair: {
      color: '#96abb6',
      width: 1,
      snap: false,
    },
    labels: {
      style: {
        fontSize: '10px',
        color: '#334252',
        fontFamily: 'DecimaMono',
        textTransform: 'uppercase',
        lineHeight: '12px',
        whiteSpace: 'nowrap',
      },
      formatter: function() {
        return this.value;
      },
    },
    alternateGridColor: '#F7F9FA',
  }, ],
  yAxis: [{
    tickPositioner: function() {
      const positions = [];
      let tick = Math.floor(this.dataMin);
      const max = Math.min(200, this.dataMax);
      const increment = Math.ceil((max - this.dataMin) / 6);

      if (this.dataMax !== null && this.dataMin !== null) {
        for (tick; tick - increment <= max; tick += increment) {
          positions.push(tick);
        }
      }
      if (this.dataMax > 200) {
        positions.push(this.dataMax);
      }
      return positions;
    },
    title: {
      text: null,
    },
    labels: {
      style: {
        fontSize: '10px',
        textAlign: 'right',
      },
    },
    breaks: [{
      from: 200,
      to: 1700,
    }],
  }, ],




  series: [{
    name: 'Attraction 1',
    data: [-0.3543, 5.4184, -31.3792, 95.2435, 135.5852, 104.7914, 84.5844, 8.5129, -38.4724, -54.1816, -13.1134, 677.986, 1763, 1420.0503, 760.9013, 100.8341, 10.4576, 89.8975, 97.4758, 55.4993, 51.4611, 24.1278, 9.9771, 26.9394, 22.042, 32.9894, 145.3526, 88.1315, 135.0617, 119.6472, 29.8568, 43.94, 26.4247, 43.4719, 128.6346, 119.7356, 33.2159, 58.6534, -7.6348, 2.1865, 31.7992],
    color: '#e63c45',
    lineWidth: 3,
  }, ]

});

[[在此处输入图片描述] [2][2]:https://i.stack.imgur.com/TIKkO.png react app的屏幕截图

reactjs highcharts
1个回答
0
投票

我在React环境中再现了您的代码,一切看起来都很好,与jsFiddle中的一样。

演示:https://codesandbox.io/s/highcharts-react-demo-83jnr?file=/demo.jsx

© www.soinside.com 2019 - 2024. All rights reserved.