7753


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


CC BY-SA 3.0
2015-03-10T03:41:41.870
7688
2019-12-13T19:05:48.460
2015-09-22T12:17:31.870
2238
7886
question
javascript jquery highcharts
Highchartsライブラリ ／ X軸件数が多い時、適当に間引いて表示したい


標準で間引いてくれます。

<http://jsfiddle.net/ebc5drzy/1/>

[code]

    $(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]
          ]
        }]
      });
    });
[/code]

[code]

    <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>
[/code]

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

まず、`xAxis`について`minPadding` `maxPadding` `minRange`程度の設定に留め、確認されてみてはいかがでしょうか。  
それでも「良い感じ」ではない場合は、[カスタマイズ](http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-
software/highcharts.com/tree/master/samples/highcharts/xaxis/tickpositions-
tickpositioner/)することもできます。


CC BY-SA 4.0
2015-03-11T04:39:36.237
7753
2019-12-13T19:05:48.460
2019-12-13T19:05:48.460
32986
2238
7688
answer