GWT动态宽度的折线图

Question

我把下面的代码折线图可视化。任何一个告诉我如何设置动态widht在线图的gwt vissualization图？ options.setWidth（1000）;我想要的不是1000个动态值。

输入代码在这里

public class CPUChart extends VerticalPanel{ 
    private LineChart lineChart; 
    private DataTable data; 

    public CPUChart(final CPUChartDataQueue cpuChartDataQueue) { 
     VisualizationUtils.loadVisualizationApi(new Runnable() { 
      public void run() { 

       setLayoutData(new FitLayout()); 
       lineChart = new LineChart(createTable(cpuChartDataQueue), createOptions("CPU Chart")); 
       add(lineChart); 

      }}, LineChart.PACKAGE); 
    } 

    private Options createOptions(String title) { 
     Options options = Options.create(); 
     **options.setWidth(1000); 
     options.setHeight(300);** 
     options.setTitleFontSize(11); 
     options.setShowCategories(true); 
     options.setLegend(LegendPosition.BOTTOM); 
     options.setTitle(title); 
     options.setSmoothLine(true); 
     options.setAxisFontSize(12); 
     options.setColors(Color3D.create("#A4C735", "#4F7512"),Color3D.create("#FF4C4C", "#FF0303")); 
     options.setMin(0); 
     options.setMax(100); 
     options.setTitleY("Percentage(%)"); 
     options.setTitleX("Time"); 
     return options; 
    } 
    private AbstractDataTable createTable(CPUChartDataQueue cpuChartDataQueue) { 
     DataTable data = DataTable.create(); 
     data.addColumn(ColumnType.STRING, "Time"); 
     data.addColumn(ColumnType.NUMBER, "CPU Usage Percentage"); 

     Queue<CPUChartData> chartDatas = cpuChartDataQueue.getQue(); 
     if(chartDatas!=null && chartDatas.size()>0){ 
      data.addRows(chartDatas.size()); 
      int i=0; 
      for (CPUChartData chartData : chartDatas) { 
       data.setValue(i, 0, chartData.getLable()); 
       data.setValue(i, 1, Integer.parseInt(chartData.getValue()));   
       i++; 
      } 
     } 

     return data; 
    } 

    public void refreshChart(CPUChartDataQueue cpuChartDataQueue){ 
     data = DataTable.create(); 
     data.addColumn(ColumnType.STRING, "Time"); 
     data.addColumn(ColumnType.NUMBER, "CPU Usage Percentage"); 

     Queue<CPUChartData> chartDatas = cpuChartDataQueue.getQue(); 
     if(chartDatas!=null && chartDatas.size()>0){ 
      data.addRows(chartDatas.size()); 
      int i=0; 
      for (CPUChartData chartData : chartDatas) { 
       data.setValue(i, 0, chartData.getLable()); 
       data.setValue(i, 1, Integer.parseInt(chartData.getValue()));   
       i++; 
      } 
     } 

     lineChart.draw(data,createOptions("CPU Chart")); 
    } 
} 

Answer 1

大多数谷歌的可视化图表需要明确的像素尺寸。只有一些FLASH图表支持百分比尺寸。
解决方法是将一个onResize处理程序添加到窗口，并在浏览器窗口调整大小时重绘/重新创建图表。