2017-01-02 8 views
-1

ハイチャートを使用して線グラフでバックグラウンドボックスを追加するにはどうすればよいですか?ハイチャートの背景オプション

タイプ:ライン

enter image description here

+2

使用グリッド線とマイナーグリッド線http://jsfiddle.net/g26xwgzp/。その他のオプションについては、APIを参照してください。http://api.highcharts.com/highcharts/yAxis.minorGridLineWidth – morganfree

+0

ありがとうMorgon。私はminorGridLineColorオプションで試しましたが、x軸ではなくyAxis行だけを表示していました。 x軸全体はgridLineWidth:1オプションを使用していましたが、その水平線を表示していました。ボックスの幅は巨大なので、私の要件を満たしていません。 xAxis:{gridLineWidth:1}、yAxis:{minorGridLineColor: '#E0E0E0'​​、minorGridLineWidth:2、minorTickLength:0、minorTickInterval: 'auto'} – rafik

+0

x軸とy軸の両方のマイナーグリッド線を設定する必要があります。上記のコメントに投稿したフィドルを見てください。 – morganfree

答えて

0

をグラフあなたがenabling plot lines for both x軸とy軸でグラフのプロットエリアの背景のこの種を追加することができます。

xAxis:[{ 
    gridLineWidth: 1 
}] // for yAxis grid lines are visible by default 

デモ:http://jsfiddle.net/0md5s7cz/

代わりにあなたがbackground of a chart's plot areaのために画像を設定することができます。

chart: { 
    plotBackgroundImage: 'https://i.stack.imgur.com/BBTab.png' 
}, 

デモ:http://jsfiddle.net/4wLvu94s/1/

+0

あなたの迅速な対応に感謝します。実際には、私は背景画像を追加したくありません。 gridLineWidthオプションを使用して、私はしようとしたが、ボックスのサイズが大きいです。実際に私は私の添付ファイルで共有小さな箱を探しています。 – rafik

+0

@rafikその場合、** morganfree **のコメントをご覧ください。あなたの質問の下で - minorGridLineがあなたのための解決策になるはずです。 –

+0

ありがとうKacper。私はminorGridLineColorオプションで試しましたが、x軸ではなくyAxis行だけを表示していました。 x軸全体はgridLineWidth:1オプションを使用していましたが、その水平線を表示していました。ボックスの幅は巨大なので、私の要件を満たしていません。 XAXIS:{ gridLineWidth:1 }、 Y軸:{ minorGridLineColor: '#E0E0E0'​​ \t minorGridLineWidth:2、 minorTickLength:0、 minorTickInterval: '自動' } – rafik