我目前正在使用GWT Visualization库生成LineChart图,该库显示一组作业的运行时间。时间值以毫秒为单位,我希望图表以hr:min:sec格式而不是毫秒显示y轴标签。我已使用setFormattedValue方法进行此转换,但遗憾的是,只有工具提示值显示格式化值,而y轴继续以毫秒显示。
这是我的代码:
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 :(得分:0)
我手边没有代码。
只有,我记得GWT的Google Graphs API文档还远未完成。您只需要知道它是Google Graphs(javascript库)的包装器。 这意味着你可以直接用setter设置一些选项,对于其他一些你必须查看JS库参数并以某种方式用通用选项setter注入它们(有一种方法在轴上设置选项“string - &gt ;价值“基础”。
在这里您可以找到JS库参数的描述: https://developers.google.com/chart/interactive/docs/gallery/areachart#Data_Format
如果你看一下“hAxis.format”,你可能会找到你想要的东西。
编辑:
要完成我的回答,您必须使用HorizontalAxisOptions class及其set
方法。
请注意,您发送的格式很棘手,如果错误则不会触发错误,但我敢打赌set("hAxis.format", "{format:'HH:mm:ss'}");