【问题标题】:chart.js: hide specific ticks in y-axis and hide all x-axis grid linechart.js:隐藏 y 轴中的特定刻度并隐藏所有 x 轴网格线
【发布时间】:2016-05-21 13:28:16
【问题描述】:

编辑

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

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

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

脚本

        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;

【问题讨论】:

    标签: javascript axis chart.js


    【解决方案1】:

    scales/yAxes

    使用 afterBuildTicks 选项
    yAxes: [{
    
      ticks: {
        min: 0,
        max: 100
    
      },
      afterBuildTicks: function(humdaysChart) {    
        humdaysChart.ticks = [];
        humdaysChart.ticks.push(0);
        humdaysChart.ticks.push(50);
        humdaysChart.ticks.push(100);    
      }
    }]
    

    或者你也可以使用'stepSize'

       yAxes: [{
    
            ticks: {
                min:0,
                max:100,
                stepSize:50
    
            }
        }]
    

    http://jsfiddle.net/Lehuga5o/

    【讨论】:

    • 谢谢你,成功了。你知道如何让图表的第一条垂直线消失吗?无法摆脱它
    • 我还不知道该怎么做。
    • 很明显,该问题的解决方案将出现在下一个版本的 charts.js 中。那我只能等了
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多