2 votes

Graphique en toile d'araignée avec interpolation par quadrillage circulaire : L'étiquette est très éloignée de la ligne de tracé.

J'ai un graphique en toile d'araignée avec une ligne de tracé à une valeur spécifique. L'interpolation de la ligne de quadrillage est utilisée comme cercle. Dans ce cas, l'étiquette fournie est affichée très loin de la ligne de tracé (coin supérieur gauche du graphique) par défaut.

Comment puis-je toujours afficher les étiquettes au centre ou à une position spécifique du cercle de la ligne de traçage, sans calculer manuellement les points x et y.

Voir l'exemple : http://jsfiddle.net/2862pqma/4/

Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'line'
  },

  title: {
    text: 'Budget vs spending',
    x: -80
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
      'Information Technology', 'Administration'
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

  yAxis: {
    gridLineInterpolation: 'circle',
    lineWidth: 0,
    min: 0,
    plotLines: [{
      value: 35000,
      width: 2,
      dashStyle: "Solid",
      color: "red",
      label: {
        text: "Line Marker",
        style: {
          color: "red"
        }
      }
    }]
  },

  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },

  series: [{
    name: 'Allocated Budget',
    data: [43000, 19000, 60000, 35000, 17000, 10000],
    pointPlacement: 'on'
  }, ]

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/exporting.js"></script>

<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

0voto

Core972 Points 3364

Utiliser le x y y paramètres de positionnement de l'étiquette : Lien vers la documentation

0voto

pawel_d Points 2502

Malheureusement, vous devez calculer la position de l'étiquette dans la carte polaire, bien que cela ne soit pas difficile. Utiliser Axis.toPixels pour convertir les valeurs des axes en pixels et les utiliser en tant que x y y positions de l'étiquette. Regardez l'exemple ci-dessous.

Référence API :
http://api.highcharts.com/highcharts/Axis.toPixels
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/xAxis.plotLines.label.x
http://api.highcharts.com/highcharts/xAxis.plotLines.label.y

Exemple :
http://jsfiddle.net/z7ya2r9y/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X