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;
}
附件是我的輸出
任何建議
感謝
你甚至看過如何實現示例圖表嗎?很明顯,它也有多個x軸,其中一個具有「反向:真」屬性。 – Strelok 2012-01-31 05:40:55
我已經嘗試了相反的,但它不正常工作,我肯定是在做一個錯誤的方式,但那就是我正在尋找,是提供的示例實現?如果如此友善地提供鏈接,我也編輯了我的問題。 – junaidp 2012-01-31 05:47:00
該實現位於頁面的源代碼中。畢竟這是一個網頁。右鍵單擊查看源代碼。該實現位於'
'標籤內的'的情況下,您可以使用unix時期的日期時間戳,並且如果您需要它,時間戳將以日期格式顯示 - 只需將軸的類型設置爲dat ETIME
例如:
XAXIS:{ 類型: '日期時間' } });
檢查此琴:http://jsfiddle.net/HnwbQ/1/
參考:http://www.highcharts.com/ref/#xAxis--type
來源
2012-01-31 06:15:41 austin
我只是想日期顯示在頂部和其他值,如00,06,12,18在底部,只是在我的問題,其使用多個X軸的鏈接,我怎麼能實現多個X軸 – junaidp 2012-01-31 07:07:45