gwt - 将 GWT 可视化的 y 轴格式从毫秒更改为小时 :min:sec

Question

我目前正在使用 GWT 可视化库生成 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;
        }

    }
}

Answer 1

我手边没有代码。

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

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

如果您查看“hAxis.format”，您可能会找到您要查找的内容。

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