2013-03-26 17 views
6

Ich habe einen Highstock Graph mit vielen Daten darin, ich kann definieren, wie die Daten gruppiert werden können, aber Id wie der Benutzer zu bestimmen, welche Datengruppierung dynamisch zwischen Tag zu verwenden und zu ändern , Woche, Monat usw.Highcharts: Wie setze ich DataGrouping?

So ist es möglich, einen Knopf zu haben, mit dem ein Benutzer ändern kann, wie die Daten gruppiert werden, wenn ja wie?

Es gibt viele undocumentated Funktionen, zum Beispiel currentDataGrouping, aber es gibt nichts, was die Datengruppierung zu setzen ... dass ich irgendeine Art und Weise sehen ...

series: [{ 
       type: 'column', 
       name: title, 
       data: data, 
       dataGrouping: { 
        units: [['week', [1]], ['month', [1]]] 
       } 
     }] 

Antwort

2

Die API verfügt über eine Methode, um die Serie zu aktualisieren (http://api.highcharts.com/highcharts#Series.update()). z.B.

Sie sollten diesen API-Aufruf verwenden können, um beliebige der Serienattribute zu ändern.

Zum Beispiel könnten Sie zwei Reihenobjekte definiert haben, und aktualisieren Sie das Diagramm das Sie auf eine Schaltfläche klicken verwenden möchten:

var seriesWeek = { 
      type: 'column', 
      name: title, 
      data: data, 
      dataGrouping: { 
       units: [ ['week', [1] ] ] 
      } 
    } 

var seriesMonth = { 
      type: 'column', 
      name: title, 
      data: data, 
      dataGrouping: { 
       units: [ ['month', [1] ] ] 
      } 
    } 

chart.series[0].update(seriesWeek); 
+0

Es ist ein bisschen Arsch zu Gesicht, es zu tun, sollte zu zwingen Lage sein, die dataGrouping zu verwenden ... – craig1231

+0

Was sind die datagrouping Optionen, die Sie zwischen wechseln? – SteveP

+0

Woche und Monat, möglicherweise auch Tag, aber die Daten gruppieren nur Chages, wenn der Bereich geändert wird. – craig1231

0

Wir haben versucht, einen Hack, um dieses, wo wir Highstock die verwendet (Splinechart) RangeSelector, Ereignis und DataGrouping. Beim Klick auf den wöchentlichen rangeselectorButton fangen wir dieses Ereignis durch setExtremes. Nachdem Sie das Ereignis eingefangen haben, nähern Sie es der Summe an. Wenn Sie zwei Serien verwenden, iterieren Sie das Objekt.

events: { 
     setExtremes: function (e) { 
      if (e.rangeSelectorButton != undefined) { 
       var triger = e.rangeSelectorButton; 
       if (triger.type == 'week') { 
        $.each(this.series, function (index, obj) { 
         obj.options.dataGrouping.units[0] = ['week', [1]]; 
        }); 
       } else if (triger.type == 'day') { 
        $.each(this.series, function (index, obj) { 
         obj.options.dataGrouping.units[0] = ['day', [1]]; 
        }); 
       } 
      } 
     } 
    }, 

@fiddle