Chart.js v2 - приховування ліній сітки


149

Я використовую Chart.js v2, щоб намалювати просту лінійну діаграму. Все виглядає добре, за винятком ліній сітки, яких я не хочу:

Ліній сітки я не хочу

Документація до лінійної діаграми знаходиться тут: https://nnnick.github.io/Chart.js/docs-v2/#line-chart , але я не можу знайти нічого про приховування цих "ліній сітки".

Як я можу видалити лінії сітки?

Відповіді:


341

Я знайшов рішення, яке працює для приховування ліній сітки в лінійній діаграмі.

Встановіть gridLinesколір таким же, як і колір тла div.

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

або використовувати

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

2
Це фактично встановлення кольору gridLines на 0 opacityчорний (прозорий колір). Таким чином, це має працювати незалежно від кольору фону div.
XCS

40
Або використовувати display: false, а не "color"
Ірвін

4
Велике спасибі! Якби тільки документація була трохи зрозумілішою з цього приводу. :)
iSS

Я хотів зберегти шкалу, але втратити лінійки на звороті діаграми, щоб ця відповідь не працювала для мене.
adg

1
Хоча ця перша відповідь може отримати бажану картину, це трохи зламати. Друге рішення, яке фактично встановлює властивість відображення gridLines на false, видається більш правильним.
Tot Zam

57
options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

5
Ця відповідь дозволила мені зберігати масштаб, але не малювати ліній сітки на графіку.
adg

19

Якщо ви хочете, щоб вони пішли за замовчуванням, ви можете встановити:

Chart.defaults.scale.gridLines.display = false;

12

Якщо ви хочете приховати лінії сітки, але хочете показати yAxes, ви можете встановити:

yAxes: [{...
         gridLines: {
                        drawBorder: true,
                        display: false
                    }
       }]


4

Нижче наведений код видаляє лінії видалення сітки з області діаграми, а не ті, що містять мітки осі x & y

Chart.defaults.scale.gridLines.drawOnChartArea = false;
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.