Highcharts에서 zoom 뒤의 축 값 얻기
13942 단어 JavaScripthighcharts
개시하다
Highcharts는 비즈니스 사용에서 유상이지만, 사전에 각양각색의 모델을 준비했다
간단하게 도표를 그릴 수 있다.
이번에 Highcharts 기능의 줌을 사용할 때 줌 뒤의 X축 값을 얻으려고 합니다
시간이 조금 걸렸기 때문에 참고로 기재하겠습니다.
(더 쉬운 취법이 있을 것 같은데...)
LINE(선) 차트 그리기
아래의 설명으로 간단하게 도표를 그릴 수 있다.<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
Highcharts.chart('graph', {
chart: {
type: 'line'
},
title: {
text: 'TEST LINE'
},
xAxis: {
categories: ['201801', '201802', '201803', '201804', '201805', '201806', '201807', '201808', '201809', '201810']
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'TEST1',
data: [2000,2040,1910,2030,2070,2230,2410,2070,1980,1910]
}, {
name: 'TEST2',
data: [2860,3110,2770,1870,1730,1440,1750,1910,2140,2560]
}]
});
</script>
</body>
</html>
줌 설정
다음 1행을 추가하면 Zoom이 유효합니다.
(이번에는 x축을 대상으로)<script>
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x' // ← ココ
},
title: {
text: 'TEST LINE'
},
xAxis: {
※ 위의 예는 선택 범위 후 201805-201810 구간으로 변경됩니다
이벤트 설정
Zoom 이후의 X축 값을 얻기 위해 tickPositions, ticks label을 가져옵니다.texter 값 식별
다음 두 가지 이벤트에서 만나보십시오chart.이벤트 안내서
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
Highcharts.chart('graph', {
chart: {
type: 'line'
},
title: {
text: 'TEST LINE'
},
xAxis: {
categories: ['201801', '201802', '201803', '201804', '201805', '201806', '201807', '201808', '201809', '201810']
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'TEST1',
data: [2000,2040,1910,2030,2070,2230,2410,2070,1980,1910]
}, {
name: 'TEST2',
data: [2860,3110,2770,1870,1730,1440,1750,1910,2140,2560]
}]
});
</script>
</body>
</html>
<script>
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x' // ← ココ
},
title: {
text: 'TEST LINE'
},
xAxis: {
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x',
events: {
selection: function(e){
console.log(e);
var aTicksP = e.target.xAxis[0].tickPositions;
var aTicksV = e.target.xAxis[0].ticks;
for(let i in aTicksP) {
console.log(aTicksV[aTicksP[i]].label.textStr);
}
}
}
},
title: {
선택한 범위 이외의 X축 값이 모두 반환됩니다. NG
Highcharts.chart('graph', {
chart: {
type: 'line',
zoomType: 'x',
events: {
redraw: function(e){
console.log(e);
var aTicksP = e.target.xAxis[0].tickPositions;
var aTicksV = e.target.xAxis[0].ticks;
for(let i in aTicksP) {
console.log(aTicksV[aTicksP[i]].label.textStr);
}
}
}
},
title: {
범위 내의 값을 돌려주었으니 당분간 좋아!
총결산
selection 활동에서 동작 시점의 값을 삭제할 수 있을 것 같습니다.
또한 Highcharts에서 도표를 선택할 수 있는 범위는 여러 가지 용도가 있는 것 같다.
Reference
이 문제에 관하여(Highcharts에서 zoom 뒤의 축 값 얻기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ryota_i/items/e29a4c2f3ca532b258e7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
