75272


x 座標の間隔を調整したいのですが  
stepSize オプションが y 軸にしかききません

callback メソッドで表示は変えられるみたいなのですが  
横軸が 100 とかになると勝手に 3 ずつとかステップされるので  
その倍数以外の 5 ずつとか 10 ずつとかに変更することができません

方法はないでしょうか

[code]

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="myChart" width="640" height="480"></canvas>
    <script>
    
    var title = 'test';
    var labels = [1,2,3,4,5,6,7,8,9];
    var datasets = [
    {
        label: 'item1',
        data: [1,2,3,4,5,6,7,8,9],
        borderColor: '#ff8888',
    },
    {
        label: 'item2',
        data: [2,3,4,5,6,7,8,9,10],
        borderColor: '#88ccff',
    }
    ];
    
    const config = {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: title
          },
        },
        responsive: true,
        scales: {
          x: {
            ticks: {
              stepSize: 2,
              callback: function(val, index) {
                if(index % 3 == 0)
                  return this.getLabelForValue(val);
                else
                  return '';
              }
            }
          },
          y: {
            ticks: {
              stepSize: 3
            }
          }
        }
      }
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, config);
    </script>
[/code]


CC BY-SA 4.0
2021-04-14T08:12:19.083
75269
2021-04-14T10:29:03.927
2021-04-14T08:38:25.757
question
javascript chart.js
chart.js で x 軸の stepSize を変更する方法


おそらく今回のケースであれば、`stepSize`と一緒に`maxTicksLimit`を設定すればよさそうですが、データに応じて「自分が思った通り」に表示するには、グラフのデータ(`labels`,
`datasets`)からこれらの値を適切に計算する必要があるかと思います。

質問のコードでx軸を2毎(1, 3, 5, ...)に表示する場合、一例として以下の様になるかと思います。

[code]

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="myChart" width="640" height="480"></canvas>
    <script>
    
    const step = 2;
    const tickCounts = (labels, step) => (Math.round(labels.length / step));
    
    var title = 'test';
    var labels = [1,2,3,4,5,6,7,8,9];
    var datasets = [
    {
        label: 'item1',
        data: [1,2,3,4,5,6,7,8,9],
        borderColor: '#ff8888',
    },
    {
        label: 'item2',
        data: [2,3,4,5,6,7,8,9,10],
        borderColor: '#88ccff',
    }
    ];
    
    const config = {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: title
          },
        },
        responsive: true,
        scales: {
          x: {
            ticks: {
              maxTicksLimit: tickCounts(labels, step),
              stepSize: step,
              callback: function(val, index) {
                if(index % 3 == 0)
                  return this.getLabelForValue(val);
                else
                  return '';
              }
            }
          },
          y: {
            ticks: {
              stepSize: 3
            }
          }
        }
      }
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, config);
    </script>
[/code]


CC BY-SA 4.0
2021-04-14T10:29:03.927
75272
2021-04-14T10:29:03.927
3068
75269
answer