Définir la valeur pour qu'elle s'étende à partir d'une autre colonne

Question

J'ai 3 colonnes dans mon tableau

|semaine % |pts |
|:----|:--|:---|
1 |34 |37 |
2 |44 |21 |
3 |41 |67 |
4 |59 |135 |
5 |49 |102 |
6 |57 |11 |
7 |60 |4 |
| 8 |47 |53 |
La première colonne est utilisée comme axe des x

 La deuxième colonne (nombres en pourcentage) que j'utilise pour visualiser dans la spline. La troisième colonne contient les points (que j'ai générés dans la requête pour définir le pourcentage de la deuxième colonne). Ce que je veux, c'est changer la couleur de la spline de recommandation (%) si les points de recommandation sont inférieurs à 43 points, sans afficher la spline des points de recommandation. Je ne sais pas quoi faire maintenant

Voici le lien du violon :

https://jsfiddle.net/czmnra04/< br / >
Membres de la famille, veuillez aider

Answer 1

Si vous souhaitez ajuster la couleur en fonction des données de la troisième colonne, l'utilisation de zones ne fonctionnera pas ici car elles sont basées sur l'axe, qui est généré en fonction des valeurs de la deuxième colonne.

Donc, si vous souhaitez changer la couleur d'un point spécifique dans la deuxième colonne en fonction de la valeur personnalisée de la troisième colonne, vous pouvez utiliser la fonction de rappel chart.events.load() et utiliser conditionnellement le point.update( ) méthode Mettre à jour la couleur de tous les points.

chart: {
  events: {
    load: function() {
      const chart = this;

      chart.series.forEach(series => {
        series.data.forEach(point => {
          if (point.pts < 43) {
            point.update({
              color: 'red'
            })
          }
        })
      })
    }
  }
}

Démo : https://jsfiddle.net/BlackLabel/ydc3m45n/
API : https://api.highcharts.com/highcharts/chart.events.load
https://api .highcharts.com/class-reference/Highcharts.Point#update