2016-08-05 8 views
0

Ein Pie/Doughnut-Diagramm wird leichter zu lesen sein, wenn kleine Portionen zu anderen gruppiert werden können. Ich möchte diese Funktion hinzufügen zeppelin-highchartsHighcharts - Pie/Doughnut Chart group small portion

In diesem Beispiel Donut Chart. Es gibt kleine Teile für Safari, die unmöglich zu lesen sind. Es ist besser, zu einer Gruppe zusammen zu „Safari Andere Versionen“

{ 
    name: 'Safari versions', 
    categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 
       'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'], 
    data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56], 
} 

Ich mag würde die kleinen Portionen zu anderen Gruppe wie diese jsfiddle

{ 
    name: 'Safari versions', 
    categories: ['Safari Other Versions', 'Safari v8.0'], 
    data: [2.21, 2.56], 
} 

ich durch Highcharts API doc gehen, aber ich habe keine Konfiguration gefunden, die dies ermöglichen könnte.

Wie kann ich diese Funktion in Highcharts implementieren?

+0

Haben Sie darüber nachgedacht ein Kreisdiagramm mit Drill-Down mit? Dies sollte leicht in ein Donut-Diagramm umgewandelt werden, wenn Sie dies wünschen. Siehe http://www.highcharts.com/demo/pie-drilldown. –

+0

@MikeZavarello, danke für Kommentare. Da ich einem Tool zur Verfügung gestellt werde, müssen andere Benutzer auswählen, welches Diagramm verwendet werden soll. Und für ein einzelnes Tortendiagramm, wie kleine Teile zusammen zu anderen gruppiert werden, so dass es nur wenige (wie 5) Stücke in einem Kreisdiagramm gibt. –

+0

Wie kommen Ihre Daten in das Diagramm? Ich denke, dass Sie vielleicht eine Funktion ausführen könnten, bei der Kreissegmente, die kleiner als ein bestimmter Prozentsatz sind, zuerst gruppiert und dann als Seriendaten zum Diagramm hinzugefügt werden können. –

Antwort

1

Ich denke, dass Sie Filterfunktion hinzufügen können, bevor Sie Ihr Diagramm erstellen. Sie können Ihre Daten auch nach der Rückruffunktion für Ladeereignisse filtern.

Hier können Sie einfaches Beispiel für Code Filtern von Daten in Callback-Funktion finden:

var groupSmallData = function(series, number) { 
    var groupValue = 0, 
     newData = []; 
    Highcharts.each(series.data, function(p) { 
     if (p.y < number) { 
      groupValue += p.y; 
     } else { 
      newData.push([p.name, p.y]) 
     } 
    }); 
    newData.push(['others', groupValue]); 
    series.setData(newData) 
} 

Hier können Sie Live-Beispiel finden, wie es funktionieren kann: http://jsfiddle.net/b33ynvaq/1/