HighStock: тренд выпрыгивает из области графика при масштабировании с zoomType = 'xy' или zoomType = 'y' - PullRequest
Новая
       21

HighStock: тренд выпрыгивает из области графика при масштабировании с zoomType = 'xy' или zoomType = 'y'

0 голосов
/ 09 мая 2018

Я работаю с HighCharts (Версия: ^ 5.0.14) и React (реаги: ^ 15.0.1, response-dom: ^ 15.0.1).

У меня проблема с HighStock ChartИзменение масштаба изображения.При zoomType = 'xy' или zoomType = 'y' увеличенные трендовые скачки HighStock по осям X и Y.Ниже картина.Однако, если Zooming type zoomType = 'X', проблем нетПроблема возникает при включении zoomType = 'y'

enter image description here

Ниже приведен код: 

import React from 'react';
import highcharts from 'highcharts/highstock';

export default class Chart extends React.Component {

  constructor (props) {
     super(props);
     this.state = {
       chartName: `chart${this.props.chartNum}`
      };
   }

componentDidMount () {

let chartOptions = {};

chartOptions = {
        rangeSelector: {enabled: false },
    credits: { enabled: false },
    tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}</b> <br/>'
    },
    navigator: {
    enabled: false
    }, 
    scrollbar: {
    enabled: false
    },
    plotOptions:{
    series:{
        turboThreshold:5000//set it to a larger threshold, it is by default to 1000,
    }
    },
    xAxis:{
    type: 'dateTime',
    minRange:3600000,
    events:{
        setExtremes:function(event){
        this.min=event.min;
        this.max=event.max;
        }
    }
    },
    yAxis:   {
    offset: 15,
    labels: {
        align: 'center',
        x: -5,
        y: 0
    },
    opposite:false,
    showLastLabel: true,
    min: this.dataMin,
    max: this.dataMax,
    events:{
        setExtremes:function(events){
        console.log("Card::YAxis::setExtremes::events.min and events.max = " + events.min +", "+ events.max);
        this.dataMin = events.min;
        this.dataMax = events.Max;
        this.min = events.min;
        this.max = events.max;
        }
    },
    tickPositioner: function () {
        var positions;
        var Maxdata = this.max;
        var MinData = this.min;
        if(ticksData != null){
        positions = ticksData;
        }else{
        positions = [];
        var tick = Math.floor(this.min);
        if(this.min == this.max){
            positions.push(this.min);
        }else{
            if (this.max !== null && this.min !== null) {
            Maxdata = Maxdata.toFixed(2);
            MinData = MinData.toFixed(2);
            tick = parseFloat(MinData);
            var increment = (Maxdata - MinData)/5;
            increment=increment.toFixed(2);
            for (tick; tick-increment<=  Maxdata; tick=(parseFloat(increment)+parseFloat(tick)).toFixed(2)) {
                if(positions.includes(tick)){
                break;
                }
                else{
                positions.push(tick);
                }                                
            }
            }else{
            positions = [0];
            }
        }     
        }
        return positions;
    }
        }

};

chartOptions.chart = {
    renderTo: document.getElementById(this.state.chartName),
    zoomType: 'xy',
    spacingBottom: 35,
    resetZoomButton: {
        position: {
            align: 'right', // by default
            verticalAlign: 'bottom', // by default
            x: 8,
            y: 20
        }
    },
    events:{
        redraw: function(){
            var serie1 = this.series[0],
            yExtremes = this.yAxis[0].getExtremes();

            var yMin = yExtremes.min;
            var yMax = yExtremes.max;


            var dataSet = serie1.data;
            var zoomedDataSet= [];
            var dataGroup;
            if(dataSet != undefined && dataSet != null){
                for(var i=0; i<dataSet.length; i++)
                {
                    if(dataSet[i] != undefined){
                        dataGroup = dataSet[i];
                        if(dataGroup[1] > yMin && dataGroup[1]< yMax){
                            zoomedDataSet.push(dataGroup);
                        }
                    }
                }
                serie1.data = zoomedDataSet;
            }
        }
    }

};

// Generate chart.
this.generateChart(this.props.data, chartOptions);

}

componentWillUpdate (nextProps) {

let chartOptions = {};
chartOptions = {
    rangeSelector: {enabled: false },
    credits: { enabled: false },
    tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}</b> <br/>'
    },
    navigator: {
    enabled: false
    }, 
    scrollbar: {
    enabled: false
    },
    plotOptions:{
    series:{
        turboThreshold:5000//set it to a larger threshold, it is by default to 1000,
    }
    },
    xAxis:{
    type: 'dateTime',
    minRange:3600000,
    events:{
        setExtremes:function(event){
        this.min=event.min;
        this.max=event.max;
        }
    }
    },
    yAxis:   {
    offset: 15,
    labels: {
        align: 'center',
        x: -5,
        y: 0
    },
    opposite:false,
    showLastLabel: true,
    min: this.dataMin,
    max: this.dataMax,
    events:{
        setExtremes:function(events){
        console.log("Card::YAxis::setExtremes::events.min and events.max = " + events.min +", "+ events.max);
        this.dataMin = events.min;
        this.dataMax = events.Max;
        this.min = events.min;
        this.max = events.max;
        }
    },
    tickPositioner: function () {
        var positions;
        var Maxdata = this.max;
        var MinData = this.min;
        if(ticksData != null){
        positions = ticksData;
        }else{
        positions = [];
        var tick = Math.floor(this.min);
        if(this.min == this.max){
            positions.push(this.min);
        }else{
            if (this.max !== null && this.min !== null) {
            Maxdata = Maxdata.toFixed(2);
            MinData = MinData.toFixed(2);
            tick = parseFloat(MinData);
            var increment = (Maxdata - MinData)/5;
            increment=increment.toFixed(2);
            for (tick; tick-increment<=  Maxdata; tick=(parseFloat(increment)+parseFloat(tick)).toFixed(2)) {
                if(positions.includes(tick)){
                break;
                }
                else{
                positions.push(tick);
                }                                
            }
            }else{
            positions = [0];
            }
        }     
        }
        return positions;
    }
    }

};



  chartOptions.chart = {
      renderTo: document.getElementById(this.state.chartName),
      zoomType: 'xy',
      spacingBottom:35,
      resetZoomButton: {
          position: {
              align: 'right', // by default
              verticalAlign: 'bottom', // by default
              x: 8,
              y: 20
          }
      },
      events:{
          redraw: function(){
              var serie1 = this.series[0],
              yExtremes = this.yAxis[0].getExtremes(),
              var yMin = yExtremes.min;
              var yMax = yExtremes.max;


              var dataSet = serie1.data;
              var zoomedDataSet= [];
              if(dataSet != undefined && dataSet != null ){
                  for(var i=0; i<dataSet.length; i++)
                  {   
                    if(dataSet[i] != undefined){
              dataGroup = dataSet[i];
              if(dataGroup[1] >= yMin && dataGroup[1]<=yMax  && dataGroup[0] >= xMin && dataGroup[0]<= xMax){
              zoomedDataSet.push(dataGroup);
              }
                    }
                  }
                  serie1.data = zoomedDataSet;
              }
          }
      }
  };
this.generateChart(nextProps.data, chartOptions);

}

generateChart (data, chartOptions) {

chartOptions.series = [
  {
    name: this.props.title,
    type: this.props.status ? 'area' : 'line',
    data: data,
    clip: false
  }
];
let chart = new highcharts.StockChart(chartOptions);

}

render () {

  const selfStyle = {
     height: '200px'
  };

  return (
            <div 
                 className="med-chart col-md-9" 
                 id={this.state.chartName} 
                 style={selfStyle}>
            </div>
  );
}

}

Я установил setExtremes со значениями события Min и Max для оси Y, но это не помогает,Если кто-либо из вас сталкивался с подобной проблемой, попросите поделиться своим подходом к решению этой проблемы.Буду признателен за то, что потратил время на чтение поста и внес ценный вклад.

...