2016-08-08 30 views
1

Ich bin mit highcharts arbeiten und ein Diagramm ähnlich wie dies zu machen Ziel: Highcharts donut chartHighchart Donut-Diagramm Anpassung

Jetzt wurde ich habe das Spiel mit der ganzen Tortur für eine Weile jetzt, und ich bin gekommen war der Lage, die folgende Nummer zu erreichen: http://jsfiddle.net/ccjSy/24/

$(function() { 
    $(document).ready(function() { 
     var chart = null;    
     var categories = ['Body Fat', 'Lean Mass'], 
      name = 'Body Fat vs. Lean Mass', 
      data = [{ 
       y: 69, 
       color: '#F0CE0C', 
       drilldown: { 
        name: 'Body Fat', 
        color: '#F0CE0C' 
       } 
      }, { 
       y: 207, 
       color: '#23A303', 
       drilldown: { 
        name: 'Lean Mass' , 
        color: '#23A303' 
       } 
      }]; 


     // Build the data array 
     var browserData = []; 
     for (var i = 0; i < data.length; i++) { 

      // add browser data 
      browserData.push({ 
       name: categories[i], 
       y: data[i].y, 
       color: data[i].color 
      }); 

     } 

     // Create the chart 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'donutchart', 
       type: 'pie', 
       spacingTop: 0 
      }, 
      title: { 
       text: 'Your Body Fat vs Lean Mass', 
       style: {"color": '#7d7d7d'} 
      }, 
      series: [{ 
       name: 'Weight', 
       data: browserData, 
       dataLabels: { 
        style: { 
         fontFamily: 'ArialMT', 
         fontSize: '15px', 
         fontWeight: 'bold', 
         color: '#7d7d7d' 
        } 
       }, 
       innerSize: '70%' 
      }], 
      tooltip: { 
       valueSuffix: ' lbs' 
      }, 
      plotOptions: { 
       series: { 
        cursor: 'pointer' 
       } 
      } 
     }); 
    }); 
}); 

ich verlassen einen benutzerdefinierten Kreis mit dem Gewicht Kennzeichnung denke den Raum leer in der Ringdiagramm und Einfügen. Aber ich bin nicht sicher, wie die folgenden Probleme zu lösen:
1) Leave mehr definiert weißen Flächen zwischen meinen beiden Säulen
2) Wie richtig Etiketten meine zwei Daten auszurichten? (Wie Sie im Modell sehen können, sind sie in einer geraden Linie mit neutralen Linien angebracht)
3) Wie die Daten unter den beiden Etiketten mit sowohl den Pfunden und dem Prozentsatz angezeigt werden, wie im Bild gezeigt.

Antwort

2

jeden der drei Fragen zu beantworten:

  1. "? Mehr Leerraum zwischen den Spalten" - ein plotOptions.pie.borderWidth Element hinzufügen. Der Standardwert ist 1. Ich habe 5 verwendet, um mehr Leerraum zu erhalten.
  2. "Richten Sie die beiden Datenbeschriftungen richtig aus?" - Sie können eine benutzerdefinierte startAngle basierend auf den zwei Datenwerten berechnen, die Ihnen den richtigen Winkel geben, um damit zu beginnen. Da Sie nur zwei Datenwerte in der Serie haben, ist das einfach.

    berechnen startangle für Kreisdiagramm

    var startAngle = 0 - (90 + (180 * (data[0].y/(data[0].y + data[1].y)))); 
    

    Beachten Sie, dass, wenn Sie den y Wert für das erste Datenobjekt ändern, die „Körperfett“ Teil des Kreisdiagramm noch richtige Position wird beibehalten, es ist auch wie der Teil des Diagramms größer oder kleiner wird.

  3. Anzeigedaten unter den beiden Etiketten mit benutzerdefinierte Formatierung?“ - plotOptions.pie.format verwenden, um benutzerdefinierte anzuwenden, um den Etiketten Kuchen Wert Formatierung.

    format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>' 
    

Hier ist ein JSFiddle arbeiten, um die Ergebnisse zu sehen. Sie müssen immer noch einen dunkelgrauen Kreis hinter dem Tortendiagramm hinzufügen und den Text "Gesamtgewicht" hinzufügen, aber das sollte nicht zu schwierig sein.

Da ich mir sicher bin, dass Sie sich darüber wundern, sollte ich erwähnen, dass unter dem Tortendiagramm-Titel eine Menge Leerraum liegt, weil genug Platz für andere Beschriftungen bleibt, die über oder unter dem Kuchen erscheinen. Da Sie nur zwei Werte verwenden, die sich immer auf der linken/rechten Seite des Tortendiagramms befinden, ändert dies nichts daran, dass sich HighCharts darauf vorbereitet, andere Beschriftungen zu verwenden, die möglicherweise in der Umgebung angezeigt werden müssen.