Etikett kann nicht an Highchart-Kreisdiagramm angehängt werden

Question

Ich versuche, einem Highcharts-Kreisdiagramm ein benutzerdefiniertes Etikett hinzuzufügen. Das Etikett wird (eventuell) mittig, unten ausgerichtet und einige HTML-Daten anzeigen. Das Problem ist, dass das Label nicht im Diagramm angezeigt wird und versucht, den Renderer zu verwenden. Ich bin ziemlich neu in Highcharts, was mache ich falsch?

$('#div_graph_0_1').highcharts({ 
       chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        type: 'pie' 
       }, 
       credits: { 
        enabled: false 
       }, 
       title: { 
        text: 'NEW VISITORS' 
       }, 
       subtitle:{ 
        text: pieSubtitleTotal, 
        style: { color: '#f07600' } 
       }, 
       tooltip: { 
        pointFormat: '{point.y}' 
       }, 
       plotOptions: { 
        pie: { 
         states: { 
          hover: { 
          halo: { 
          size: 9, 
          attributes: { 
           fill: '#f07600'} 
           } 
          } 
         }, 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          connectorWidth: 0, 
          enabled: true, 
          format: '{point.y}', 
          style: { 
           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
          } 
         }, 
        } 
       }, 
       series: [{ 
        name: 'New', 
        colorByPoint: true, 
        data: [{ 
         name: 'Repeat', 
         y: subtitleTotal, 
         color: '#fff', 
         borderColor: '#f07600', 
         borderWidth: 2 
        }, { 
         name: 'New', 
         color: '#f07600', 
         borderColor: '#f07600', 
         y: pieTotalVisitors, 
         sliced: true, 
         selected: true 
         }] 
        }], 
        navigation: { 
        buttonOptions: { 
         enabled: false 
         } 
        }, 
        function(chart) { // on complete 

         chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', 0, 0) 
          .css({ 
           color: '#4572A7', 
           fontSize: '16px' 
          }) 
          .add(); 
        } 
      }); 

Answer 1

Sie sind auf dem richtigen Weg, wie gerenderten Text gibt und die auf dem Diagramm. Was Sie definieren mussten, waren die erwarteten X- und Y-Werte, in denen Sie den Text platzieren wollten.

entdeckte ich dies wegen der "y" in "styled":

Wenn Sie einen anderen y-Wert in Ihrem renderer.text Anruf definieren, sagen wir, 100 Sie diese:

Hier ist die Syntax ist, sollten Sie wie folgt vor:

chart.renderer.text('Your text', X_VALUE, Y_VALUE) 

In meinem obigen Beispiel, habe ich Ihren Text:

chart.renderer.text('Your text', 0, 100) 

..., die es 100 Pixel nach unten vom oberen Rand des Diagramms stellt.

Sie müssen diese Werte manuell definieren; Es gibt keine Out-of-the-Box-Möglichkeit, um "bottom-aligned, center-aligned" zu sagen. Um dies vielseitiger zu machen, können Sie die Höhe und Breite Ihres Container-Div erfassen und die X- und Y-Werte auf diese Weise berechnen.

Sie können dies tun, indem Sie die Höhe und Breite des Diagramms in einer Stylesheet-Deklaration, die Definition JavaScript Variablen außerhalb Diagrammoptionen Festsetzung und dann diese Variablen aus der renderer.text Erklärung Aufruf:

// in your inline stylesheet 
#container: { width: '650px', height: '450px' } 

// variables defined before your chart options 
var chartHeight = $('#container').height(); 
var chartWidth = $('#container').width(); 

// in your renderer code 
chart.renderer.text('Your text', chartWidth * 0.5, chartHeight - 100) 

In dem obigen Beispiel: Ihr gerenderter Text beginnt bei 50% der Diagrammbreite und 100 Pixel vom unteren Rand des Diagramms.

Ein Punkt, den Sie beachten sollten: Sie haben eine HTML-Tabelle erwähnt. In diesem Fall würde ich vorschlagen, renderer.text zu renderer.html zu wechseln. Dadurch können viel mehr HTML-Elemente im endgültigen Diagramm gerendert werden.

Ich hoffe, all dies war hilfreich!