添加多个系列，深入到Vaadin中的多个系列

Question

我想在瓦丹做this。

$(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] 
      ] 
     }] 
    } 
}); 
}); 

我使用异步追溯生成系列：

chart.setDrilldownCallback(new DrilldownCallback() { 

    private static final long serialVersionUID = 6274915467357292767L; 

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

正如你可以看到handleDrilldown(DrilldownEvent event)返回一个DataSeries，我需要一个列表。

有没有什么办法可以在Vaadin中添加多个钻取系列？

Answer 1

我不确定为什么你需要一个列表DataSeries。您应该在DrilldownEvent对象中获得足够的信息，以了解哪个栏（共和党/民主人士/其他; 2010/2014）被选中。知道这一点，你可以构建一个单一的DataSeries，其中包含所有四个东，西，北，南的值。可以看到您提交的链接，每个向下钻取都包含在一个系列“系列3”中。

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

知道你可以构建你DataSeries：

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