Fügen Sie mehrere Serien mit Drilldown zu mehreren Serien in Vaadin

Question

Ich möchte this in Vaadin tun.

$(function() { 

// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Highcharts multi-series drilldown' 
    }, 
    subtitle: { 
     text: 'Click columns to drill down to single series. Click categories to drill down both.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 

    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 

    series: [{ 
     name: '2010', 
     data: [{ 
      name: 'Republican', 
      y: 5, 
      drilldown: 'republican-2010' 
     }, { 
      name: 'Democrats', 
      y: 2, 
      drilldown: 'democrats-2010' 
     }, { 
      name: 'Other', 
      y: 4, 
      drilldown: 'other-2010' 
     }] 
    }, { 
     name: '2014', 
     data: [{ 
      name: 'Republican', 
      y: 4, 
      drilldown: 'republican-2014' 
     }, { 
      name: 'Democrats', 
      y: 4, 
      drilldown: 'democrats-2014' 
     }, { 
      name: 'Other', 
      y: 4, 
      drilldown: 'other-2014' 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      id: 'republican-2010', 
      data: [ 
       ['East', 4], 
       ['West', 2], 
       ['North', 1], 
       ['South', 4] 
      ] 
     }, { 
      id: 'democrats-2010', 
      data: [ 
       ['East', 6], 
       ['West', 2], 
       ['North', 2], 
       ['South', 4] 
      ] 
     }, { 
      id: 'other-2010', 
      data: [ 
       ['East', 2], 
       ['West', 7], 
       ['North', 3], 
       ['South', 2] 
      ] 
     }, { 
      id: 'republican-2014', 
      data: [ 
       ['East', 2], 
       ['West', 4], 
       ['North', 1], 
       ['South', 7] 
      ] 
     }, { 
      id: 'democrats-2014', 
      data: [ 
       ['East', 4], 
       ['West', 2], 
       ['North', 5], 
       ['South', 3] 
      ] 
     }, { 
      id: 'other-2014', 
      data: [ 
       ['East', 7], 
       ['West', 8], 
       ['North', 2], 
       ['South', 2] 
      ] 
     }] 
    } 
}); 
}); 

ich die asynchrone Aufreißen bin mit der Serie zu generieren:

chart.setDrilldownCallback(new DrilldownCallback() { 

    private static final long serialVersionUID = 6274915467357292767L; 

    @Override 
    public DataSeries handleDrilldown(DrilldownEvent event) { 
     i++; 
     return buildDataSeries(event.getItem()); 
    } 
}); 

Wie Sie handleDrilldown(DrilldownEvent event) liefert einen Datenreihe sehen, und ich brauche eine Liste.

Gibt es eine Möglichkeit, mehrere Reihen mit Drilldown in Vaadin hinzuzufügen?

Answer 1

Ich bin mir nicht sicher, warum Sie eine Liste von DataSeries benötigen. Sie sollten genügend Informationen im DrilldownEvent Objekt haben, um zu wissen, welche Bar (republican/democrat/other; 2010/2014) ausgewählt wurde. Wenn Sie das wissen, können Sie einen einzelnen DataSeries konstruieren, der alle vier Ost-, West-, Nord- und Südwerte enthält. Wie aus dem von Ihnen eingereichten Link hervorgeht, ist jeder Drilldown in einer Serie "Series 3" enthalten.

String year = event.getSeries().getName() // 2010 or 2014 
String party = event.getDataSeriesItem().getName() // Republican, Democrat or Other 

Zu wissen, dass man Ihnen Datenreihe konstruieren kann:

DataSeries series = new DataSeries(); 
series.add(new DataSeriesItem("East", a); 
series.add(new DataSeriesItem("West", b); 
series.add(new DataSeriesItem("North", c); 
series.add(new DataSeriesItem("South", d); 
// a, b, c, d depending on the year and party variables above