High Charts PieChart Wie kann ich Punktwerte innerhalb von Segment- und Labelnamen außerhalb von

Question

anzeigen?

Genau wie der Titel sagt. https://jsfiddle.net/4wrLampu/5/

Ich habe dieses Kreisdiagramm mit einer einfachen Reihe von Daten und einem zentralen Kuchen, der Gesamtmenge anzeigt.

Ich möchte, dass der Datenname und der Wert so bleiben wie außerhalb des Segments, aber ich möchte auch den Prozentwert des Segments in der Mitte des Segments anzeigen.

Ist dies bei hohen Diagrammen möglich, was wäre der einfachste Weg, dies zu erreichen?

Für diejenigen, die nicht auf jfiddle schauen möchten, ist dies der Code für das aktuelle Diagramm.

$(document).ready(function($) { 
$('#pieChart').highcharts({ 
    credits: { 
    enabled: false 
    }, 
    chart: { 
     renderTo: 'container', 
     type: 'pie', 
     marginTop: 20, 
      marginRight: 10, 
      marginLeft: 10, 
      marginBottom: 20, 
     spacingTop: 0, 
     spacingBottom: 0, 
     spacingLeft: 0, 
     spacingRight: 0, 
    }, 
     plotOptions: { 
      pie: { 
       size:'100%', 
       center: ['50%', '50%'], 
       borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       distance: 0, 
        color: '#333333', 
        formatter: function() { 
          return '<b>'+ this.point.name +'</b>: <br/>'+  this.point.y; 
         } 
      }, 
      } 
     }, 

    title: { 
     text: 'Your Repayment' 
    }, 
    series: [{ 
     type: 'pie', 
     name:'Total', 
     size: '39%', 
     dataLabels: { 
      enabled: true, 
      distance: -30, 
      y: -50, 
      color: '#ccc', 
     style: { 
     fontSize: "18px", 
     fontFamily: "Arial, sans-serif", 
     fontWeight: "normal" 
     }, 
     labelFormatter:function() { 
    return '<span style="margin-top:-30px;">'+this.name+'<span>'+' $'+this.y; 
} 
     }, 
     data:[{ 
      name: 'Total', 
      color:'#B2B2B2', 
      y:1309 
     }] 
    }, 
    { type: 'pie', 
     name: 'My Pie Chart', 
     colorByPoint: true, 
     size: '80%', 
    innerSize: '50%', 
     data:[{ 
      name: 'Value Name 1', 
      color:'#72BB32', 
      y: 984 
     },{ 
      name:'Value Name 2', 
      color:'#F1E52B', 
      y: 250 
     },{ 
      name:'Value Name 3', 
      color:'#A67461', 
      y: 75 
     }] 
    }], 
}); 
}); 

Answer 1

Um zwei separate Werte für eine einzelne Kreisdiagramm Scheibe (einen Wert außerhalb der Scheibe und ein Prozentsatz innen) haben, werden Sie zwei verschiedene series Objekte in Ihrer Diagramm Definition benötigen. Jeder wird unterschiedliche dataLabels haben.

Grundsätzlich sollten Sie diese zusätzliche Aufgabe zum series Array hinzuzufügen:

{ 
    type: 'pie', 
    name: 'My Pie Chart', 
    size: '90%', 
    dataLabels: { 
    distance: -50, 
    formatter: function() { 
     if (this.percentage != 0) return Math.round(this.percentage) + '%' 
    } 
    } 
} 

jsfiddle Siehe Arbeitsversion: https://jsfiddle.net/bb83f2by/