43204


お世話になっております。

webページ上に線グラフを表示するためにchart.jsを使っています。  
その際、Y軸のtick表示を間引きたいのですが、グリッド線は残しておきたいのです。

出来ればchart.jsそのものは弄る事無く実現したいのですが、  
何か方法があればアドバイスいただけませんでしょうか。

よろしくお願いします。

\-----補足-----  
使用しているchart.jsのバージョンを記載しておりませんでした。  
chart.js 2.7.2 になります。  
ご指摘ありがとうございました。


CC BY-SA 3.0
2018-04-13T03:54:22.683
43200
2018-04-18T06:46:52.150
2018-04-18T06:46:52.150
28141
28141
question
javascript chart.js
chart.jsのtick表示を間引きたい


ticks の callback
を使うと[ラベルの書式を変更することができる](http://www.chartjs.org/docs/latest/axes/labelling.html#creating-
custom-tick-formats)ので、これを使うとたとえば奇数番目のラベルだけ消すといったことができます。

[code]

    callback: function(value, index, values) {
        if (index % 2 === 1) {
            return "";
        }
        return value;
    }
    
[/code]

以下は Chart.js 2.7.2 を使った実装例です。

[code]

    var ctx = document.getElementById("sampleChart").getContext("2d");
    var config = {
        type: 'line',
        data: {
            labels: ["0", "1", "2", "3", "4", "5"],
            datasets: [{
                label: "sample",
                data: [
                    Math.random(),
                    Math.random(),
                    Math.random(),
                    Math.random(),
                    Math.random(),
                    Math.random()
                ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        suggestedMin: 0.0,
                        suggestedMax: 1.0,
                        stepSize: 0.1,
                        callback: function(value, index, values) {
                            if (index % 2 === 1) {
                                return "";
                            }
                            return value;
                        }
                    }
                }]
            }
        }
    };
    var sampleChart = new Chart(ctx, config);
[/code]

[code]

    div#chart {
        width: 400px;
        height: 400px;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
    <div id="chart"><canvas id="sampleChart"></canvas></div>
[/code]


CC BY-SA 3.0
2018-04-13T04:55:11.417
43204
2018-04-13T04:55:11.417
19110
43200
answer