Highchartsライブラリ / X軸件数が多い時、(動的生成する)全体件数から判断して、適当に間引く(良い感じに表示する)方法はあるでしょうか?
-
X軸の目盛を間引きたいだけなのか、データ点も一緒に間引きたい、どちらでしょうか?– htb2015年3月10日 4:41
-
データはそのままで、X軸の目盛表示だけを間引きたいですー– re92015年3月10日 12:41
-
JSFIDDLE拝見しました。期待通りに動作していることを確認しました。しかし、コード内容が難しくて理解できないので追加で教えてください。xAxisの間引きはどこで実装しているのでしょうか? minRangeだけによる効果? 「minPadding」「maxPadding」も含んでの効果? また、「xAxis minRange: 150」の意味は、初期表示間隔には関係なく、追加分に対してのみ、最低限150単位以上の間隔を空ける、という指定なのでしょうか? また、「minPadding」「maxPadding」はそれぞれ最小最大間隔だと思うのですが、x軸の何に対する間隔なのでしょうか? また、カスタマイズデモについて、X軸の間隔が不均等なのはどこで設定しているのでしょうか? 「yAxis: {tickPositioner」で関数計算していますが、この結果が(?)、どうしてX軸に反映されるのでしょうか?– re92015年3月11日 10:02
-
期待通りで良かったです。 コメントでのついでの質問が多すぎるので一部だけ。 ■xAxisの間引きはどこで実装→標準の機能ですし、highchatsのソースを読む必要があります。 ■xAxis.minRange→100,200,300と値を変えてRunを押していただければ意味がわかるはずです。今回は最初に右端がクリックしやすいように開けただけです。たぶんコメントからお分かりだと察します。 ■X軸の間隔が不均等→xAxis.tickPositions: [0, 1, 2, 4, 8]です これ以上はご自身でAPI Referenceをお読みになるか別の質問を立ててください。 また、回答に対する質問は回答に対してコメントしてください。– htb2015年3月11日 13:11
コメントを追加
|
1 件の回答
標準で間引いてくれます。
http://jsfiddle.net/ebc5drzy/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
minRange: 150
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [
[20, 20],
[80, 80]
]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
demoをもとにoption
のxAxis - minRange:
を少し大きくしたものです。プロットエリアをクリックして、x値のより大きな点を追加していってください。x軸のtick
が間引かれていくことが分かると思います。
まず、xAxis
についてminPadding
maxPadding
minRange
程度の設定に留め、確認されてみてはいかがでしょうか。
それでも「良い感じ」ではない場合は、カスタマイズすることもできます。