Je suis en train de créer un Activity Gauze Highchart. Tout fonctionne bien sauf que je rencontre des difficultés pour gérer les DataLabels.

Comme vous pouvez le voir si vous exécutez le code ci-dessous, les étiquettes de données sont rendues correctement et même tournent avec le chemin de la série. Mais ils sont juste foirés pour les séries qui ont de très petites valeurs.

Y a-t-il de toute façon que je puisse le cacher pour la plus petite série ou le garder à l'extérieur de l'arc (voir ici pour référence https://www.highcharts.com/demo/pie-basic)

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
  },

  title: {
    text: 'Activity',
    style: {
      fontSize: '24px'
    }
  },


  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Move
      outerRadius: '112%',
      innerRadius: '88%',
      backgroundColor: Highcharts.color(Highcharts.getOptions().colors[0])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }, { // Track for Exercise
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }, { // Track for Stand
      outerRadius: '62%',
      innerRadius: '38%',
      backgroundColor: Highcharts.color(Highcharts.getOptions().colors[2])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        formatter: function(){
          return "Really really long data label";
        },
        enabled: true,
        allowOverlap: true,
        zIndex: 10,
        crop: false,
        overflow: "allow",
        textPath: {
          enabled: true,
          attributes: {
            textAnchor: 'start',
            startOffset: 5,
            dy: 15
          }
        }
      },
      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },

  series: [{
    name: 'Move',
    data: [{
      color: Highcharts.getOptions().colors[0],
      radius: '112%',
      innerRadius: '88%',
      y: 80
    }]
  }, {
    name: 'Exercise',
    data: [{
      color: Highcharts.getOptions().colors[1],
      radius: '87%',
      innerRadius: '63%',
      y: 65
    }]
  }, {
    name: 'Stand',
    data: [{
      color: Highcharts.getOptions().colors[2],
      radius: '62%',
      innerRadius: '38%',
      y: 10
    }]
  }]
});
#container{
  width: 300px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>


<div id="container"></div>
1
void 1 sept. 2020 à 19:53

2 réponses

Meilleure réponse

Comme je l'ai découvert, la fonction getDataLabelPath n'est pas encore implémentée pour la série solidgauge. Je l'ai signalé comme une amélioration de fonctionnalité sur la chaîne de problèmes Highcharts GitHub où vous pouvez partager votre opinion.

https://github.com/highcharts/highcharts/issues/14158

Et voici ma tentative de base d'implémenter cette fonctionnalité: https://jsfiddle.net/BlackLabel/nfwvos5j/

(function(H) {
  H.seriesTypes.solidgauge.prototype.pointClass.prototype.getDataLabelPath = function(label) {
    var renderer = this.series.chart.renderer,
      shapeArgs = this.shapeArgs,
      upperHalf = this.angle < 0 || this.angle > Math.PI,
      start = shapeArgs.start,
      end = shapeArgs.end,
      radians = end - start;
    if (!this.dataLabelPath) {
      this.dataLabelPath = renderer
        .arc({
          open: true
        })
        // Add it inside the data label group so it gets destroyed
        // with the label
        .add(label);
    }

    this.dataLabelPath.attr({
      x: shapeArgs.x,
      y: shapeArgs.y,
      r: (shapeArgs.r +
        (this.dataLabel.options.distance || 0)),
      start: start,
      end: end,
      clockwise: 1,
    });

    this.outerArcLength = radians * this.dataLabelPath.r

    return this.dataLabelPath;
  }
})(Highcharts)
1
Sebastian Wędzel 2 sept. 2020 à 08:38

Vous pouvez utiliser le rappel du formateur dataLabels. Dans le rappel, ce mot-clé fait référence au le contexte d'étiquette de données de type PointLabelObject.

Quelque chose comme ça:

dataLabels: {
    formatter: function(options){
        if(this.series.name === 'Stand') {
            return null;
        } else {
            return this.y;
        }
    }
}
1
Troopers 2 sept. 2020 à 07:13