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

我正试图建立一个气象图作为参考

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

因为有多个Yaxis，但没有多个xaxis

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

                 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;  
}

附件是我的输出

有什么建议吗

---

感谢您为日期使用unix历元时间戳，如果您需要时间戳以日期格式显示，只需将轴的类型设置为datetime
例如：
xAxis：{ 键入：“日期时间” } });

检查这把小提琴：

---

参考资料：

正如@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
}],

---

你有没有看过示例图表是如何实现的？很明显，它也有多个x轴，其中一个具有属性

contract:true

。我已经尝试了contract，但它不能正常工作，我肯定是以错误的方式进行的，但这就是我想要的，是否提供了示例实现？如果是这样，请提供链接，我也编辑了我的问题。实施是在网页的来源。这毕竟是一个网页。右键单击，查看源代码。实现在

标记内的

块中。谢谢，我们确实有源代码选项，但不适用于metegoram，您能看到我可以找到metegoram代码的页面吗。。谢谢教授，你说得对。如果今晚晚些时候没有人这样做，我会在我有时间的时候发布一个解决方案。我只想在顶部显示日期，在底部显示其他值，如00,06,12,18，只需c我问题中的链接，它使用多个x轴，如何实现多个x轴谢谢，实际上我在搜索Java代码（当我在GWT中构建它时（高图），如果您知道此metegoram的GWT java代码，我将非常感谢它的org.moxieapps.GWT.highcharts您的代码看起来应该可以工作。是在绘制轴之前将其添加到图表中，还是在修改轴之后重新绘制图表？您可以发布更多代码吗？我刚刚用完整的代码编辑了我的问题，并获得了输出谢谢，看起来两个X轴都在你指定的图表上。你能澄清这个问题吗？

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)