GWT：在 GWTHighCharts 中创建一个简单的气象图

Question

我正在尝试构建一个气象图 this

在此图表中，下面的 xaxis 的值如下00,06,12,18
这些都很好，但我如何添加上述值，如 satNov14、sunNov15、MonNov16，

因为有多个 Y 轴但没有多个 x 轴。

我正在尝试这个，但在那之后我没有按正确的顺序获得上述日期

                 final Chart chart = new Chart()  

    .setBorderColor("#C7D5D5")
    .setBorderWidth(3)
    .setBorderRadius(0)
    .setBackgroundColor("#FFFFFF")
    .setChartTitleText("Meteogram")  
    .setSpacingTop(5)
    .setChartSubtitleText("yr.no")
    .setColumnPlotOptions(new ColumnPlotOptions()  

    .setDataLabels(new DataLabels()  
    .setEnabled(true)  
    ) )


    .setToolTip(new ToolTip() 
    .setFormatter(new ToolTipFormatter() {  
        public String format(ToolTipData toolTipData) {  
            String s; 

            if (toolTipData.getPointName() != null) { 
                s = toolTipData.getPointName() + ": " +  
                toolTipData.getYAsLong() + " ,";  
            } else {  
                s = toolTipData.getXAsString() + ": " +  
                toolTipData.getYAsLong();  
            }  
            return s;  

        }  
    })  
    )  
    .setLabelItems(  
            new LabelItem()  
            .setHtml("")  
            .setStyle(new Style()  
            .setLeft("40px")  
            .setTop("8px")  
            .setColor("black")  
            )  
    );  

    // Primary yAxis  
    chart.getYAxis(0).setGridLineWidth(1).setAxisTitleText("test")
    .setAxisTitle(new AxisTitle()  
    .setText("") 

    )  
    .setLabels(new YAxisLabels()  
    ////                .setStyle(new Style()  
    ////                    .setColor("#89A54E")  
    //                )  
    .setFormatter(new AxisLabelsFormatter() {  
        public String format(AxisLabelsData axisLabelsData) {  
            return axisLabelsData.getValueAsLong() + "°";  
        }  
    })  
    );  

    // Secondary yAxis  
    chart.getYAxis(1).setGridLineWidth(2)  
    .setAxisTitle(new AxisTitle()  
    .setText("")  
    )  
    .setOpposite(true)  
    .setLabels(new YAxisLabels()  
    .setFormatter(new AxisLabelsFormatter() {  
        public String format(AxisLabelsData axisLabelsData) {  
            return  axisLabelsData.getValueAsLong() + "°";  
        }  
    })  
    );
    Point p1 = new Point(5, 5);
    Marker m = new Marker();
    m.setEnabled(true);
    m.setOption("symbol", "url(41.png)");
    p1.setMarker(m);

    Point p2 = new Point(4.5, 4.5);
    p2.setMarker(m);

    Point p3 = new Point(4, 4);
    Marker m1 = new Marker();
    m1.setEnabled(true);
    m1.setOption("symbol", "url(41.png)");
    p3.setMarker(m1);



    chart.getXAxis(1).setGridLineWidth(1).setLinkedTo(0)

    .setOpposite(true) 


    .setCategories("Sat Nov13", "Sat Nov14", "Sat Nov15", "Sat Nov16"); 

    chart.getXAxis(0).setGridLineWidth(1)
    .setCategories("18","00","06","12","18","00","06","12","18","00","06","12","18","00","06","12","18") ;



    chart.addSeries(chart.createSeries()
            .setName("")  

            .setType(Series.Type.COLUMN)
            .setPlotOptions(new ColumnPlotOptions()  
            .setColor("#24CBE5"))

            .setPoints(new Number[]{  
                    0,0,0,3,5,3,0,1,3,1,0,0,0,0}
            )  
            .setYAxis(1) 
    );

    chart.addSeries(chart.createSeries()  
            .setName("")  
            .setType(Series.Type.SPLINE)
            .setPoints(new Number[]{  
                    5,4.5,4,5,1,0,0,0,3,5,6,3,7,2 })
                    .setPlotOptions(new ColumnPlotOptions() 
                    .setMarker(m1)

                    .setColor("#4572A7"))

    ); 
    return chart;  
}

附件是我的输出

任何建议

谢谢

Answer 1

就像 @Strelok 所说，如果右键单击页面并查看源代码，代码位于

xAxis: [
{ 
  type: 'datetime',
  tickInterval: 6 * 3600 * 1000,
  tickPosition: 'inside',
  tickLength: 30,
  gridLineWidth: 1,
  gridLineColor: '#F0F0F0',
  startOnTick: false,
  endOnTick: false,
  minPadding: 0,
  maxPadding: 0,
  offset: 30,
  showLastLabel: true,
  labels: {
    formatter: function(){
      return Highcharts.dateFormat('%H', this.value);
    }
  }
}, 
{ 
  linkedTo: 0,
  tickInterval: 24 * 3600 * 1000,
  labels: {
  formatter: function(){
    return Highcharts.dateFormat(
      '<span style="font-size: 12px; font-weight: bold">%a</span>, %b %e', this.value);
    },
    align: 'left',
    x: 3
  },
  opposite: true,
  tickLength: 20,
  gridLineWidth: 1
}],

从外观上看，顶部用于底部标签，底部用于顶部标签。

编辑：

试一试。

chart.getXAxis(1)
    .setLinkedTo(0)
    .setGridLineWidth(1)
    .setOpposite(true) 
    .setTickInterval(24 * 3600 * 1000) // 24 hour tick intervals
    .setCategories("Sat Nov13", "Sat Nov14", "Sat Nov15", "Sat Nov16"); 

chart.getXAxis(0)
    .setGridLineWidth(1)
    .setCategories("18","00","06","12","18","00","06","12","18","00","06","12","18","00","06","12","18");
    .setTickInterval(6 * 3600 * 1000) // 6 hour tick intervals
    .setTickPosition("inside")
    .setStartOnTick(false)
    .setEndOnTick(false)
    .setOffset(30)
    .setShowLastLabel(true)

Answer 2

如果您对日期使用 unix 纪元时间戳，并且需要以日期格式显示时间戳 - 只需将轴的类型设置为日期时间

例如：
x轴：{
类型：'日期时间'
}
});

检查这个小提琴： http://jsfiddle.net/HnwbQ/1/

参考：http://www.highcharts.com/ref/#xAxis--type