2012-01-31 33 views
0

我想建立一個天氣圖表爲thisGWT:科瑞在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; 
} 

附件是我的輸出enter image description here

任何建議

感謝

+0

你甚至看過如何實現示例圖表嗎?很明顯,它也有多個x軸,其中一個具有「反向:真」屬性。 – Strelok 2012-01-31 05:40:55

+0

我已經嘗試了相反的,但它不正常工作,我肯定是在做一個錯誤的方式,但那就是我正在尋找,是提供的示例實現?如果如此友善地提供鏈接,我也編輯了我的問題。 – junaidp 2012-01-31 05:47:00

+1

該實現位於頁面的源代碼中。畢竟這是一個網頁。右鍵單擊查看源代碼。該實現位於''標籤內的'

0

的情況下,您可以使用unix時期的日期時間戳,並且如果您需要它,時間戳將以日期格式顯示 - 只需將軸的類型設置爲dat ETIME
例如:
XAXIS:{ 類型: '日期時間' } });

檢查此琴:http://jsfiddle.net/HnwbQ/1/
參考:http://www.highcharts.com/ref/#xAxis--type

+0

我只是想日期顯示在頂部和其他值,如00,06,12,18在底部,只是在我的問題,其使用多個X軸的鏈接,我怎麼能實現多個X軸 – junaidp 2012-01-31 07:07:45