Есть ли способ отключить заголовок и подзаголовок в Highcharts?


108

Я просто собираюсь жестко его закодировать, используя html, который находится вокруг графика, я не хочу использовать встроенный.

Я не вижу в API опции «disable: true».

Кто-нибудь может мне здесь помочь.

Как отключить заголовок / подзаголовок в highcharts?

(если вы просто оставите текст пустым, он по-прежнему будет вырезать пробел в том месте, где находится заголовок, я бы хотел, чтобы это не происходило)


4
не могли бы вы отметить ответ как принятый? ;)
Plastic

Ответы:


159

Это можно сделать, установив для текста заголовка пустую строку.

В этом случае пространство для заголовка не создается:

без текста: http://jsfiddle.net/jlbriggs/JVNjs/284/

с текстом: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

Если вам нужно меньше места, чем осталось в этом случае, просто установите для параметра «marginTop» значение 0.

{{ edit из-за многочисленных комментариев :

Как указано несколько раз ниже, в документации теперь указывается text: nullспособ достижения этого.

Любой метод дает желаемый результат.


Не могли бы вы взглянуть на это для меня? Я сделал все предложения здесь, и все еще остается огромное белое пространство (видите кнопку печати, плавающую в пространстве вверху справа?) Goo.gl/jHR5l
D3Chiq

1
Думаю, я решил это. Моя легенда была выровнена по верхнему краю, а плавающий на легенде был установлен на false, это создало для нее место. Я установил плавающее значение для легенды в значение true, и теперь остальная часть диаграммы сдвинулась вверх.
D3Chiq

2
Как указано ниже, задокументированное решение - присвоить тексту значение null.
Tom Hubbard

1
По версии 5.0.9это неверно. Установка текста таким образом, чтобы пустая строка генерировала текст заголовка по умолчанию, такой как «Заголовок диаграммы» и «Значения».
mwilson

@mwilson Я смотрю на демонстрацию по ссылке в ответе выше, которая (на момент написания этого комментария) использует версию 5.0.9, и она по-прежнему работает с nullили ''. Вы можете уточнить или продемонстрировать?
jlbriggs

61

Из документа highcharts :

text: String Заголовок диаграммы. Чтобы отключить заголовок, установите для текста значение null. По умолчанию используется заголовок диаграммы.

скрипка: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
Это правильный ответ, не знаю, почему это не принятый ответ. Все остальные решения, представленные ниже, являются обходными путями.
Джерард

Возможно, пользователь, задавший вопрос, просто забыл пометить его как «принятый»
Plastic

2
вероятно, потому что на вопрос был дан правильный ответ за 6 месяцев до
публикации

"соответственно" ?? какой ответ ты имеешь ввиду ?? ;-)
Пластиковые

4
Это правильно с "новым" api. Когда был задан вопрос, это не получило поддержки. Так что оба действительны в зависимости от версии.
TecHunter

40

Я предпочитаю этот метод:

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},

2
Для получения более новой версии обратитесь к ответу Plastic с «text: null»
TecHunter


13

Это просто ... Установить только нулевой текст заголовка. Как это

    $(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: null  
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

});

см. @ APIreference: http://api.highcharts.com/highcharts#title.text


1
Основываясь на документе, это становится undefinedпосле этого коммита github.com/highcharts/highcharts/commit/…
foxiris

10

Установите для текстового поля значение null

Из документации на http://api.highcharts.com/highcharts#title.text

текст: Строка

Заголовок диаграммы. Чтобы отключить заголовок, установите для текста значение null. По умолчанию используется заголовок диаграммы.


Основание на документе, он становится неопределенным , поскольку это обязательство github.com/highcharts/highcharts/commit/...
foxiris

9

Вы всегда можете это сделать:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Это сработало для меня :-)

примечание: этот ответ был предназначен version 2.*для более новых версий, есть ответы получше.


8

Согласно документу Highcharts, правильный способ - установить для text значение null.


> Заголовок диаграммы. Чтобы отключить заголовок, установите для текста значение undefined.
Ини


3

В реактивном коде ниже работал у меня,

  title: {
    style : {
      display : 'none'
    }
 }

Надеюсь, это помогло.



1

Для тех, кто использует Typescript, вы можете установить Highcharts.TitleOptions, чтобы скрыть заголовок диаграммы.

title: {
  text: undefined
},
subtitle: {
  text: undefined
}


-1

Это немного похоже на взлом, но вы также можете попробовать следующее:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.