javascript - 一定时间后从 CanvasJS 图表中删除点

Question

下面的算法仅在满足特定规则时才创建newX和newY 。否则，我想从我的图表中删除生成的点。

目前，我正在使用date.splice，但是没有从图中删除任何内容。我怎样才能解决这个问题？

if(jelly <= 2) {
   for (let i = 1; i < newCount; i++) {
    let newX = data[i - 1].x  + FORMULA;
    let newY = data[i - 1].y  + FORMULA;
    data.push({ x: newX, y: newY }); //new coordinates updated on Canvas
  }
}

else {
    data.splice(data.length - 1, 5000)
    //however, nothing is pushed to Canvas

}

return data;

请在下面找到图表的所有安装组件：

var CanvasJSReact = require('../../canvasJS/canvasjs.react');
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class Home extends Component {
  componentWillMount() {
  }
  ON_CHANGE_EVENTS

  render() {
    const {data } = this.props.Property;
  const options = {
        axisY:{
          title: "",

       axisX:{
         title: "",
          viewportMinimum: -3000,
          viewportMaximum: 3000,             

        data: [{  
                  type: "scatter",
                  markerSize: 8,
                  color: "green",
                  dataPoints: data
     }]
}
    return (          
          <CanvasJSChart className="classOne" options = {options}/>
      </div>
    )
  }
}

export default connect(
  state => ({
    example: state.otherState
  }),
  dispatch => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(Home)

标签： javascriptreactjscanvasjs

Answer 1

您可能必须使用 CanvasJS 中的函数来操作数据。这是删除最后 50 个点的示例：

class App extends React.Component {
    constructor() {
        super()
        this.restoreAllPoints = this.restoreAllPoints.bind(this)
        this.removeLastFiftyPoints = this.removeLastFiftyPoints.bind(this)

        this.style = {
            width: '100%',
            height: '300px'
        }

        this.dataPoints = [
            { x: 10000, y: 1100 },
            { x: 11000, y: 1200 },
            { x: 13000, y: 1250 },
            { x: 15000, y: 1280 },
            { x: 18000, y: 1600 },
            { x: 20000, y: 2200 },
            { x: 20700, y: 2200 },
            { x: 21000, y: 2200 },
            { x: 24500, y: 2200 },
            { x: 26500, y: 2530 },
            { x: 28500, y: 3040 },
            { x: 30000, y: 4030 },
            { x: 30400, y: 3040 },
            { x: 30600, y: 4060 },
            { x: 31000, y: 4040 },
            { x: 31500, y: 5100 },
            { x: 31900, y: 4200 },
            { x: 34400, y: 3030 },
            { x: 37400, y: 3020 },
            { x: 40000, y: 8210 },
            { x: 40500, y: 8040 },
            { x: 40500, y: 9060 },
            { x: 42300, y: 8300 },
            { x: 44100, y: 9300 },
            { x: 45200, y: 6300 },
            { x: 45400, y: 9900 },
            { x: 46600, y: 4200 },
            { x: 48500, y: 8200 },
            { x: 50000, y: 9040 },
            { x: 50300, y: 9200 },
            { x: 50700, y: 7020 },
            { x: 53000, y: 9040 },
            { x: 53300, y: 9030 },
            { x: 56700, y: 10120 },
            { x: 58700, y: 4020 },
            { x: 60000, y: 10200 },
            { x: 60450, y: 10100 },
            { x: 60400, y: 10400 },
            { x: 60900, y: 9400 },
            { x: 61000, y: 9400 },
            { x: 64000, y: 9000 },
            { x: 64100, y: 10600 },
            { x: 64400, y: 10400 },
            { x: 66000, y: 12400 },
            { x: 66400, y: 13400 },
            { x: 70400, y: 10400 },
            { x: 73200, y: 10600 },
            { x: 76300, y: 11000 },
            { x: 78100, y: 12000 },
            { x: 78500, y: 13000 },
            { x: 80900, y: 10400 },
            { x: 90500, y: 13400 }
        ]

        this.options = {
            data: [
                {
                    type: "scatter",
                    dataPoints: [...this.dataPoints]
                }
            ]
        }
    }

    restoreAllPoints() {
        this.chart.data[0]
            .set('dataPoints', [...this.dataPoints])
    }

    removeLastFiftyPoints() {
        const points = this.chart.data[0]
            .get('dataPoints')
            .slice(0, -50)

        this.chart.data[0].set('dataPoints', points)
    }

    componentDidMount() {
        this.chart = new CanvasJS.Chart('chart', this.options)
        this.chart.render()
    }

    componentWillUnmount() {
        this.chart.destroy()
    }

    render() {
        return (
            <div>
                <div id="chart" style={this.style}></div>
                <button onClick={this.restoreAllPoints}>Restore all points</button>
                <button onClick={this.removeLastFiftyPoints}>Remove last 50 points</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>