Gruppiert und gestapelten Säulen mit gemeinsamen Serie

Es ist fast wie folgt aus: https://www.highcharts.com/demo/column-stacked-and-grouped Gruppiert und gestapelten Säulen mit gemeinsamen Serie

Außer, dass ich möchte John (oder eine andere Person) haben in beiden Stapeln. In meinem Fall ist jede Person weder männlich noch weiblich, sie sind Teil von beiden.

Hier sind meine Kategorien und Serien:

categories: [ 
    'Apples', 'Oranges', 
], 

series: [ 
    { 
     name: 'John', 
     data: [1, 9], 
     stack: 'Type A', 
    }, 
    { 
     name: 'John', 
     data: [2, 10], 
     stack: 'Type B', 
    }, 
    { 
     name: 'Joe', 
     data: [3, 11], 
     stack: 'Type A', 
    }, 
    { 
     name: 'Joe', 
     data: [4, 11], 
     stack: 'Type B', 
    }, 
    { 
     name: 'Jane', 
     data: [5, 12], 
     stack: 'Type A', 
    }, 
    { 
     name: 'Jane', 
     data: [6, 13], 
     stack: 'Type B', 
    }, 
    { 
     name: 'Janet', 
     data: [7, 14], 
     stack: 'Type A', 
    }, 
    { 
     name: 'Janet', 
     data: [8, 15], 
     stack: 'Type B', 
    }, 
],

Aber mit diesem Moment habe ich alle Namen (Janet, Joe, ...) in der Legende dupliziert.

Quelle

2017-10-23 leyou

diese Antwort von the highcharts forum Got:

duplizierten Namen in der Legende entfernen Sie series.linkedTo können festlegen, ": previous" in der zweiten Serie mit dem gleichen Namen. Dann können Sie die Serienfarben so ändern, dass sie gleich sind.

series: [{ 
    name: 'John', 
    data: [1, 9], 
    stack: 'Type A', 
    }, { 
    name: 'John', 
    data: [2, 10], 
    stack: 'Type B', 
    linkedTo: ':previous', 
    color: Highcharts.getOptions().colors[0] 
    },

Live-Demo: http://jsfiddle.net/ppotaczek/psguhp3r/

Quelle

2017-10-25 14:47:32 leyou

können Sie showInLegend: false verwenden Duplikate in der Legende zu verhindern und sicherzustellen, dass entsprechende Reihe die gleiche Farbe haben:

series: [{ 
    name: 'John', 
    color: 'orange', 
    data: [1, 9], 
    stack: 'Type A', 
    }, { 
    name: 'John', 
    color: 'orange', 
    data: [2, 10], 
    stack: 'Type B', 
    showInLegend: false 
    } 
]

Dieses Stück Code bewirkt, dass Legende die gleiche Aktion durchführt (Ein-/Ausblenden) für alle Serien mit dem gemeinsamen Namen:

events: { 
    legendItemClick: function(event) { 
     var series = this, 
     chart = this.chart; 

     var isVisible = series.visible; 
     chart.series.forEach(function(s) { 
     if (s.name === series.name) { 
      if (isVisible) { 
      s.hide(); 
      } else { 
      s.show(); 
      } 
     } 
     }); 
     event.preventDefault(); 
    } 
    }

Live-Arbeitsbeispiel:http://jsfiddle.net/kkulig/cgu0g7vm/

API-Referenzen:

Quelle

2017-10-24 12:05:47

Danke. Das hat mein Problem fast gelöst. Außer dass ich dann verschiedene Farben für die gleiche Gruppe in verschiedenen Stapeln hatte. Siehe meine eigene Antwort für eine Lösung, die ich vom Highcharts-Forum bekommen habe. – leyou

Gruppiert und gestapelten Säulen mit gemeinsamen Serie

Antwort

Verwandte Themen