关于 javascript:chart.js：隐藏 y 轴中的特定刻度并隐藏所有 x 轴网格线


chart.js: hide specific ticks in y-axis and hide all x-axis grid line

编辑

我正在使用 charts.js 库，我想知道是否可以从我的 y 轴隐藏特定的刻度，例如，我定义了刻度的 min:0 和 max:100，它显示了所有的值从 0 到 100 的十的倍数，但我只想显示 0、50 e 100。(已解决)

另一个问题是我想删除所有 x 轴的网格线，但方法"gridLines.display : false"并没有隐藏图表开头的第一条垂直线，只是隐藏了其他的。

这就是我想要的样子：http://i.stack.imgur.com/GryIo.png

脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
        var humdays = document.getElementById("charthumdays");
        var humdaysChart = new Chart(humdays, {
        type: 'bar',
        data: {
            labels: ["15 mar","16 mar","17 mar","18 mar","19 mar","20 mar","21 mar"],
            datasets: [{
                label:"humidity",                
                data: [60, 20, 30, 50, 60, 80, 90],
                backgroundColor:"#D9B090",
                hoverBackgroundColor: 'rgba(217,176,144,0.8)'


            }]
        },
        options: {

            scales: {

               xAxes : [{


                    gridLines : {
                         display : false
                    }

               }],

                yAxes: [{

                    ticks: {
                        min:0,
                        max:100

                    }
                }]
            }
        }
    });

    humdaysChart.options.legend.display = false;

对 scales/yAxes 使用 afterBuildTicks 选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
yAxes: [{

  ticks: {
    min: 0,
    max: 100

  },
  afterBuildTicks: function(humdaysChart) {    
    humdaysChart.ticks = [];
    humdaysChart.ticks.push(0);
    humdaysChart.ticks.push(50);
    humdaysChart.ticks.push(100);    
  }
}]

或者你也可以使用\\'stepSize\\'

1
2
3
4
5
6
7
8
9
   yAxes: [{

        ticks: {
            min:0,
            max:100,
            stepSize:50

        }
    }]

http://jsfiddle.net/Lehuga5o/

相关讨论