Est-il possible de mettre à jour les données Highchart automatiquement et de faire un effet d'animation ?

Question

J'utilise Highchart dans une application React. Je veux faire un effet animé pour Highcart.

Par exemple, c'est pour montrer la progression du téléchargement d'autres données. Je passe la progression via this.props.progress . Cependant, je ne peux pas passer les props à la propriété des données dans Highchart.

Est-il possible de faire un effet animé avec la mise à jour des données ? Quelle pourrait être la meilleure pratique ?

Highchart.js

class Highchart extends React.Component {
static propTypes = {
data: React.PropTypes.array,
text: React.PropTypes.string,
colors: React.PropTypes.array,
size: React.PropTypes.any,
bgcolor: React.PropTypes.string,
width: React.PropTypes.number
}

constructor (props) {
super(props)

this.state = {
  uuid: uuid()
}
}

componentDidMount () {
Highcharts.chart(this.state.uuid, {
  chart: {
    renderTo: 'container',
    type: 'pie',
    width: this.props.width,
    backgroundColor: this.props.bgcolor
  },
  title: {
    text: this.props.text,
    useHTML: true,
    verticalAlign: 'middle',
    floating: true
  },
  plotOptions: {
    pie: {
      shadow: false,
      allowPointSelect: false,
      size: '100%',
      dataLabels: { enabled: false }
    },
    series: {
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },
  tooltip: { enabled: false },
  credits: { enabled: false },
  colors:this.props.colors,
  series: [{
    data: this.props.data,
    size: this.props.size,
    innerSize: '90%',
    showInLegend:false,
    dataLabels: {
      enabled: false
    }
  }]
})
}
render () {
return (
  <div id={this.state.uuid} className='high-chart' />
)
}
}

export default Highchart

ProgressMeter.js

import React from 'react'
import Highchart from 'components/Highchart'

class ProgressMeter extends React.Component {
static propTypes = {
progress: React.PropTypes.number,
 }

render () {
return (
  <div
    className='signup-percents-meter'
  >
   <DonutChart data={[this.props.progress, 100-this.props.progress]}
   //this code does not work.
      colors={['#ee382a', '#eaeaea']}
      />
  </div>
  )
  }
  }

  export default ProgressMeter

Answer 1

Modifier uniquement les options ne fonctionnera pas pour Highcharts - ces options sont utilisées une seule fois pour générer le graphique. Si vous voulez changer ces options, vous devez appeler chart.update avec de nouvelles options ou une mise à jour plus dédiée, par exemple pour données de la série vous pouvez utiliser series.setData .

Comment les autres gèrent cette situation :

1. Le wrapper React officiel de Highcharts highcharts-react utilise chart.update - la ligne de code concernée .

2. Tiers react-highcharts est de reconstruire le graphique Highcharts en utilisant de nouvelles options. C'est moins optimal, mais c'est généralement une approche plus sûre pour eux (c'est un code tiers, donc en cas de bogue, ils doivent attendre que le bogue soit résolu). Code pertinent : appelez renderChart sur les mises à jour y créer le graphique dans le renderChart .

3. Tiers react-highcharts-wrapper reconstruit également un graphique lors de la mise à jour - voici pourquoi .

À propos de l'animation :

Lorsque le graphique est reconstruit (créé à nouveau), l'animation initiale s'exécute (sauf indication contraire dans l'onglet option d'animation du graphique ) et pour les mises à jour dynamiques comme chart.update Le graphique est redessiné avec l'animation activée par défaut.