プロジェクトでグラフを表示するためにハイチャートを使用しています。すべてが素晴らしいのですが、ズーム ボタンを使用すると、グリッド線が消えてしまいます。
これの理由が何であるか知っている人はいますか？
以下は私のコードです。highcharts.com で提供されている例からあまり変更していません。
最初に問題なくグリッド線のあるグラフを取得します。ズーム ボタンを使用した場合にのみ、グリッド線が消えます。これは、ハイチャートの例では発生しません。
var chart = new Highcharts.StockChart({
chart: {
renderTo: <id of my div>
},
rangeSelector: {
buttons: [
{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}
],
selected:3,
inputPosition:{
x:25,
y:25,
align:"left"
},
align:"left"
},
title: {
margin:40,
text: title,
style:{
color:"#000",
fontFamily: "AvenirNextLTW01-MediumC 721311 !important",
fontWeight:"bold",
fontSize:"12px"
}
},
scrollbar : {
enabled : false
},
yAxis: [{
title: {
text: ytitle
},
lineWidth: 2,
}],
credits: {
enabled: false
},
exporting: {
enabled: false
},
loading:{
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
},
tooltip:
{
valueDecimals: 2,
style:{
fontSize:'9px'
}
},
series: [
{
type: 'line',
color: '#4572A7',
name: title,
data: <data array>
}]
});
編集: x 軸のカテゴリをグループ化するために、Web サイトで次のプラグインを使用しました。上記の問題は、このプラグインを使用した場所で発生します。この問題を取り除くために何を変更できるかを誰かが提案できますか? または、この機能を提供する他のプラグインを誰かが提案できますか?
http://blacklabel.github.io/grouped_categories/
このプラグイン コードを次の jsfiddle で使用したところ、問題を再現できました。このフィドルのズーム（1y、6m）ボタンをクリックして、グリッド線が消えていることを確認してください