3

Highchartsライブラリ / X軸件数が多い時、(動的生成する)全体件数から判断して、適当に間引く(良い感じに表示する)方法はあるでしょうか?

4
  • X軸の目盛を間引きたいだけなのか、データ点も一緒に間引きたい、どちらでしょうか?
    – htb
    2015年3月10日 4:41
  • データはそのままで、X軸の目盛表示だけを間引きたいですー
    – re9
    2015年3月10日 12:41
  • JSFIDDLE拝見しました。期待通りに動作していることを確認しました。しかし、コード内容が難しくて理解できないので追加で教えてください。xAxisの間引きはどこで実装しているのでしょうか? minRangeだけによる効果? 「minPadding」「maxPadding」も含んでの効果? また、「xAxis minRange: 150」の意味は、初期表示間隔には関係なく、追加分に対してのみ、最低限150単位以上の間隔を空ける、という指定なのでしょうか? また、「minPadding」「maxPadding」はそれぞれ最小最大間隔だと思うのですが、x軸の何に対する間隔なのでしょうか? また、カスタマイズデモについて、X軸の間隔が不均等なのはどこで設定しているのでしょうか? 「yAxis: {tickPositioner」で関数計算していますが、この結果が(?)、どうしてX軸に反映されるのでしょうか?
    – re9
    2015年3月11日 10:02
  • 期待通りで良かったです。 コメントでのついでの質問が多すぎるので一部だけ。 ■xAxisの間引きはど​こで実装→標準の機能ですし、highchatsのソースを読む必要があります。 ■xAxis.minRange→100,200,300と値を変えてRunを押していただければ意味がわかるはずです。今回は最初に右端がクリックしやすいように開けただけです。たぶんコメントからお分かりだと察します。 ■X軸の間隔が不均等→xAxis.tickPositions: [0, 1, 2, 4, 8]です これ以上はご自身でAPI Referenceをお読みになるか別の質問を立ててください。 また、回答に対する質問は回答に対してコメントしてください。
    – htb
    2015年3月11日 13:11

1 件の回答 1

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をもとにoptionxAxis - minRange:を少し大きくしたものです。プロットエリアをクリックして、x値のより大きな点を追加していってください。x軸のtickが間引かれていくことが分かると思います。

まず、xAxisについてminPadding maxPadding minRange程度の設定に留め、確認されてみてはいかがでしょうか。
それでも「良い感じ」ではない場合は、カスタマイズすることもできます。

1
  • 回答ありがとうございます。参考になりましたー
    – re9
    2015年3月12日 1:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。