0
でシンプルmeteogram
CREAT私はこのチャートではthisGWT：GWTHighCharts
としてmeteogramを構築しようとしていますがありますが、これらは罰金ですが、どのように私は追加することができ00,06,12,18
のような値を使用して、以下のX軸上記の値は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軸も持ち、そのうちの1つは属性が「反対：true」であることは明らかです。 – Strelok
私はすでに反対にしようとしましたが、正しく動作していません。私は間違った方法でそれをやっていますが、私が探していたことは、実装例が提供されていますか？親切にリンクを提供しても、私は自分の質問を編集しました。 – junaidp
実装はページのソースにあります。それは結局のところウェブページです。右クリックし、ソースを表示します。実装は '
'タグ内の 'ですあなたはあなたの日付にunix epochタイムスタンプを使い、それが必要ならタイムスタンプを日付形式で表示する必要があります - ちょうど軸のタイプをdatに設定してください例えばETIME
：
X軸：{ タイプ： '日時' }}）。
チェックこのフィドル：http://jsfiddle.net/HnwbQ/1/
参照：@Strelokが言ったように、あなたが右のページビューソースをクリックした場合http://www.highcharts.com/ref/#xAxis--type
出典
2012-01-31 06:15:41 austin
私はちょうど日付は00:06,12,18のような最上部に表示する日付、ちょうど私の質問のリンク、複数のx軸を使用して、私は複数のx軸を達成することができます – junaidp