2012-03-23 52 views
3

我目前正在使用GWT Visualization库生成LineChart图表,以显示一组作业的运行时间。时间值以毫秒为单位,我希望图形以hr:min:sec格式显示y轴标签,而不是毫秒。我已经使用setFormattedValue方法进行此转换,但不幸的是,只有工具提示值显示格式化值,而y轴继续以毫秒显示。将GWT可视化的y轴格式从毫秒更改为hr:min:sec

这里是我的代码:

import java.util.Collection; 
import java.util.HashMap; 
import java.util.Iterator; 

import com.electriccloud.commander.gwt.client.util.CommanderUrlBuilder; 
import com.google.gwt.user.client.ui.HorizontalPanel; 
import com.google.gwt.user.client.ui.Label; 
import com.google.gwt.user.client.ui.VerticalPanel; 
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.visualization.client.AbstractDataTable; 
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType; 
import com.google.gwt.visualization.client.DataTable; 
import com.google.gwt.visualization.client.VisualizationUtils; 
import com.google.gwt.visualization.client.visualizations.Table; 
import com.google.gwt.visualization.client.visualizations.corechart.HorizontalAxisOptions; 
import com.google.gwt.visualization.client.visualizations.corechart.LineChart; 




public class ScheduledJobMonitorFancyChartPanel extends HorizontalPanel{ 

    protected static final int MS = 0; 
    protected static final int HR_MIN_SEC = 1; 
    private String scheduleName; 
    private HashMap<String, AverageElapsedTime> elapsedTimeData; 
    private Table dataTable; 
    private LineChart lineChart; 
    private boolean graphIsVisible = true; 
    private int displayStyle; 


    public ScheduledJobMonitorFancyChartPanel(){ 
     super(); 
     this.setStyleName("hidden"); 
    } 

    public ScheduledJobMonitorFancyChartPanel(String schedName, HashMap<String, AverageElapsedTime> data, int displayType){ 
     this(); 
     this.scheduleName = schedName; 
     this.elapsedTimeData = data; 
     this.displayStyle = displayType; 
     createTableAndChart(); 
     this.setVisible(graphIsVisible); 
    } 

    private void createTableAndChart(){ 
     // this block defines the table and chart 
     Runnable onLoadCallback = new Runnable() { 
      public void run() { 
       VerticalPanel outterPanel = new VerticalPanel(); 
       Label chartTitle = new Label("ElapsedTime Data for " + scheduleName); 
       chartTitle.setStylePrimaryName("chartTitle"); 
       outterPanel.add(chartTitle); 
       HorizontalPanel allChartGroups = new HorizontalPanel(); 
        allChartGroups.setStylePrimaryName("allChartGroupsStyle"); 

       // Since a single Job may have multiple steps being monitored, this creates the charts 
       // for each step, but groups them all (horizontally) under the same job 
       Collection<String> c = elapsedTimeData.keySet(); 
       Iterator<String> itr = c.iterator(); 

       while(itr.hasNext()){ 
        String stepName = itr.next(); 
        AverageElapsedTime aet = elapsedTimeData.get(stepName); 
        AbstractDataTable linkableTable = createTableWithLinks(aet); 
        AbstractDataTable table = createTable(aet); 

        dataTable = new Table(linkableTable, createDataTableOptions()); 
         dataTable.setStylePrimaryName("dataTableStyle"); 

        lineChart = new LineChart(table, createLineChartOptions(stepName)); 
         lineChart.setStylePrimaryName("lineChartStyle"); 


        HorizontalPanel tableAndChartGroup = new HorizontalPanel(); 
         tableAndChartGroup.setStylePrimaryName("tableAndChartGroup"); 
         tableAndChartGroup.add(dataTable); 
         tableAndChartGroup.add(lineChart); 

        allChartGroups.add(tableAndChartGroup); 
       } 

       outterPanel.add(allChartGroups); 
       addToPanel(outterPanel); 
      } 
     }; 
     // this line gets the table/chart defined above displayed on the screen 
     VisualizationUtils.loadVisualizationApi(onLoadCallback, LineChart.PACKAGE, Table.PACKAGE); 
    } 

    // Because the table/chart is created inside an annonymous Runnable object, this method 
    // exposes it to being added to "this" 
    private void addToPanel(Widget widget){ 
     this.add(widget); 
    } 

    // set up the table used by the LineChart 
    private AbstractDataTable createTable(AverageElapsedTime aet){ 
     DataTable data = DataTable.create(); 

     data.addColumn(ColumnType.STRING, "JobId"); 
     data.addColumn(ColumnType.NUMBER, "ElapsedTime"); 

     data.addRows(aet.getSize()); 

     HashMap<Long, Long> jobIdElapsedTimeHash = aet.getListOfTimes(); 
     Collection<Long> c = jobIdElapsedTimeHash.keySet(); 
     Iterator<Long> itr = c.iterator(); 
     int row = 0; 
     while(itr.hasNext()){ 
      Long jobId = itr.next(); 
      data.setValue(row, 0, jobId.toString()); 
      if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.MS) 
       data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId)); 
      else if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC){ 
       data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId)); 
       String formattedValue = AverageElapsedTime.getDisplayTime(jobIdElapsedTimeHash.get(jobId)); 
       data.setFormattedValue(row, 1, formattedValue); 
      } 
      row++; 
     } 

     return data; 
    } 

    // set up the table used by the DataTable - It embeds links to the jobId listed 
    private AbstractDataTable createTableWithLinks(AverageElapsedTime aet){ 
     DataTable data = DataTable.create(); 

     data.addColumn(ColumnType.STRING, "JobId"); 
     data.addColumn(ColumnType.NUMBER, "ElapsedTime"); 

     data.addRows(aet.getSize()); 

     HashMap<Long, Long> jobIdElapsedTimeHash = aet.getListOfTimes(); 
     Collection<Long> c = jobIdElapsedTimeHash.keySet(); 
     Iterator<Long> itr = c.iterator(); 
     String urlBase = CommanderUrlBuilder.getBase(); 
     int row = 0; 
     while(itr.hasNext()){ 
      Long jobId = itr.next(); 
      data.setValue(row, 0, "<a href='" + urlBase + "link/jobDetails/jobs/" + jobId + "' target='_blank'>" + jobId + "</a>"); 
//   data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId)); 
      if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.MS) 
       data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId)); 
      else if(this.displayStyle == ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC){ 
       data.setValue(row, 1, jobIdElapsedTimeHash.get(jobId)); 
       String formattedValue = AverageElapsedTime.getDisplayTime(jobIdElapsedTimeHash.get(jobId)); 
       data.setFormattedValue(row, 1, formattedValue); 
      } 
      row++; 
     } 

     return data; 
    } 

    // set the options for the DataTable 
    private Table.Options createDataTableOptions(){ 
     Table.Options options = Table.Options.create(); 
     options.setHeight("300"); 
     options.setWidth("190"); 
     options.setAllowHtml(true); 
     return options; 
    } 


    // set the options for the LineChart 
    private com.google.gwt.visualization.client.visualizations.corechart.Options createLineChartOptions(String stepName){ 
     com.google.gwt.visualization.client.visualizations.corechart.Options options = com.google.gwt.visualization.client.visualizations.corechart.Options.create(); 
     options.setWidth(500); 
     options.setHeight(300); 
     options.setCurveType("function"); 
     options.setColors("#336E95"); 
     options.setTitle(stepName); 
     HorizontalAxisOptions hao = HorizontalAxisOptions.create(); 
     hao.setSlantedText(true); 
     hao.setSlantedTextAngle(45); 
     options.setHAxisOptions(hao); 
     return options; 
    } 

    public void setTimeDisplay(int displayType) { 
     switch(displayType){ 
     case 0: 
      break; 
     case 1: 
      this.displayStyle = ScheduledJobMonitorFancyChartPanel.HR_MIN_SEC; 
     } 

    } 
} 

回答

0

我没有手头上的代码。

只是,我记得GWT的Google Graphs API文档远未完成。你只需要知道它是一个包含在Google图表中的javascript库。 这意味着你可以直接使用setter设置一些选项,对于其他一些你需要查看JS库参数并用通用选项设置器以某种方式注入它们(有一种方法可以在“字符串 - >值“的基础)。

在这里你可以找到的JS库参数的说明: https://developers.google.com/chart/interactive/docs/gallery/areachart#Data_Format

如果你看一下“hAxis.format”,你可能会发现你在找什么。

编辑: 要完成我的答案,您必须使用HorizontalAxisOptions class及其set方法。 请注意,您发送的格式非常棘手,如果错误不会触发错误,但我敢打赌set("hAxis.format", "{format:'HH:mm:ss'}");

相关问题