レポートページを開発中です。このページでは、ハイチャートとハイマップを一緒に使用しています。最初のロードではこれ以上の問題はありませんが、ユーザーが別のページをクリックすると、このレポート ページのハイマップ エリアがスクロール ダウンします。
私は単一ページのアプリケーションを持っているので、すべてのリンクは ajax 呼び出しを使用しています。
この解決策を見つけましたが、この方法では rootscope 要素を保存できません。また、Cookie や localstorage を使用したくありません。
$('#mapsmaps').highcharts('Map', {
title : {
text : 'City Lived',
style: {
color: '#008bff'
}
},
subtitle : {
text : ''
},
legend: {
title: {
text: ' ',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
floating: true,
valueDecimals: 0,
valueSuffix: '',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 10,
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
// backgroundColor: 'none',
// borderWidth: 0,
// shadow: false,
useHTML: true,
padding: 0,
pointFormat: '<span class="f32"></span>'
+ ' {point.name}'
},
colorAxis: {
dataClasses: [{
from: 1,
to: 1000,
color: "#5FA08F"
}, {
from: 1000,
to: 2000,
color: "#82A970"
}, {
from: 2000,
to: 3000,
color: "#E5AF47"
}, {
from: 3000,
to: 4000,
color: "#EC8A37"
}, {
from: 4000,
to: 5000,
color: "#F55126"
}, {
from: 5000,
color: "#F30505"
}]
},
series : [{
data : data,
mapData: Highcharts.maps['countries/en/en-all'],
joinBy: 'hc-key',
name: 'City',
states: {
hover: {
color: '#BADA55'
}
},
animation: {
duration: 1000
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}],
navigation: {
buttonOptions: {
enabled: false
}
}
});
}