Приховати високі діаграми осі та сітки


80

Я намагаюся повністю приховати вісь та сітки моєї діаграми Highcharts. Поки що я намагався встановити ширину рядків 0, але це не вийшло.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

Чи можна просто глобально вимкнути лінії осей / галочки та лінії сітки, щоб створити "простий" графік?


Відповіді:


150

Просто додайте

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

до визначення xAxis.

З версії 4.1.9 ви можете просто використовувати атрибут оси visible:

xAxis: {
    visible: false,
}

@dgw Це робить вісь x прозорою, але вона все одно займає фізичний простір під даними. Чи є спосіб також надати йому 0 висоту?
Тревор Бернем

19
Це трохи надмірно. HighCharts повинен реалізувати просту властивість під назвою "visible", яка перемикає, відображається вісь чи ні. Я опублікував це як запит на функцію, і ви можете проголосувати за нього тут .
Дан Даскалеску,

2
minorGridLineWidthбуло незрозуміле майно, яке я шукав. Дякую!
jetcom

1
@TrevorBurnham - Щоб видалити фізичний простір, у якому були галочки, потрібно встановити chart.spacing = [0, 0, 0, 0] (або просто встановити будь-яку вісь, наприклад chart.spacingLeft, на нуль, якщо ви не хочете для усунення всіх інтервалів). Це було недостатньо для мене у цьому питанні.
Метью Дін

1
tickLength: 0здавалося, все, що мені потрібно, щоб приховати позначки на моїй лінійній діаграмі.
Хартлі Броді

74

Для yAxisвас також знадобляться:

gridLineColor: 'transparent',


1
Є також необхідно встановити title.textдля null? У будь-якому випадку, HighCharts повинен просто реалізувати просту властивість під назвою "visible", яка перемикає, відображається вісь чи ні. Я опублікував це як запит на функцію, і ви можете проголосувати за нього тут .
Дан Даскалеску,

установка gridLineColorдля transparentможе передчасно видалити лінії сітки , якщо ви все ще є інші осі , щоб видалити. Дивіться цей приклад .
Дан Даскалеску,

28

Якщо у вас вища версія Highcharts, ніж v4.9, ви можете скористатися visible: falseв налаштуваннях xAxisі yAxis.

Приклад:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

6
Це найкраща відповідь
мікапам


5

мені вдалося вимкнути моє просто

       lineColor: 'transparent',
       tickLength: 0

2

Якщо ви не хочете торкатися об'єкта конфігурації, ви просто приховуєте сітку за допомогою css:

.chart-container .highcharts-grid {
   display: none;
}

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