2014-10-08 147 views
0

我正在使用GWT Highcharts并希望创建半圈甜甜圈(http://www.highcharts.com/demo/pie-semi-circle)。这是在javascript中使用plotOptions.pie.startAngleplotOptions.pie.endAngle完成的。 GWT Highcharts似乎没有办法。然后我尝试用.setOption("/plotOptions/pie/endAngle", "90")手动设置它,但这没有效果。 HighStock 1.2.4(GWT Highcharts支持的最新版本)可能不支持?GWT Highcharts - 半圈甜甜圈

我的代码如下所示:

final Chart chart = new Chart() 
.setType(Series.Type.PIE) 
.setChartTitleText("Browser market shares at a specific website, 2010") 
.setPlotBackgroundColor((String) null) 
.setPlotBorderWidth(null) 

.setPlotShadow(false) 
.setOption("/plotOptions/pie/startAngle", "-90") 
.setOption("/plotOptions/pie/endAngle", "90") 
.setPiePlotOptions(new PiePlotOptions() 

    .setAllowPointSelect(true) 
    .setCursor(PlotOptions.Cursor.POINTER) 
    .setPieDataLabels(new PieDataLabels() 
     .setConnectorColor("#000000") 
     .setEnabled(true) 
     .setColor("#000000") 
     .setFormatter(new DataLabelsFormatter() { 
      @Override 
      public String format(DataLabelsData dataLabelsData) { 
       return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %"; 
      } 
     }) 
    ) 
) 
.setLegend(new Legend() 
    .setLayout(Legend.Layout.VERTICAL) 
    .setAlign(Legend.Align.RIGHT) 
    .setVerticalAlign(Legend.VerticalAlign.TOP) 
    .setX(-100) 
    .setY(100) 
    .setFloating(true) 
    .setBorderWidth(1) 
    .setBackgroundColor("#FFFFFF") 
    .setShadow(true) 
) 
.setToolTip(new ToolTip() 
    .setFormatter(new ToolTipFormatter() { 
     @Override 
     public String format(ToolTipData toolTipData) { 
      return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %"; 
     } 
    }) 
); 

工作javscript正在寻找这样的:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser<br>shares', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: 50 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       dataLabels: { 
        enabled: true, 
        distance: -50, 
        style: { 
         fontWeight: 'bold', 
         color: 'white', 
         textShadow: '0px 1px 2px black' 
        } 
       }, 
       startAngle: -90, 
       endAngle: 90, 
       center: ['50%', '75%'] 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      innerSize: '50%', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       ['Chrome', 12.8], 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       { 
        name: 'Others', 
        y: 0.7, 
        dataLabels: { 
         enabled: false 
        } 
       } 
      ] 
     }] 
    }); 
}); 

有没有什么办法让这个与GWT Highcharts工作?

回答

0

我认为这可能是Highcharts版本的问题,根据docs - 它支持2.3.4。那么,没有2.3.4版本,应该有2.3.5。

Highstock 1.2.4版本是在Highcharts 2.3.3和2.3.5之间发布的。有什么可以更新Highstock到1.2.5吗?在1.2.5中肯定支持。