Czy istnieje sposób na wyłączenie tytułu i podtytułu w Highcharts?


108

Zamierzam po prostu zakodować go na stałe za pomocą html, który jest wokół wykresu, nie chcę używać wbudowanego.

Nie widzę opcji „wyłącz: prawda” w interfejsie API.

Czy ktoś może mi tu pomóc.

Jak wyłączyć tytuł / podtytuł na listach przebojów?

(jeśli po prostu zostawisz tekst pusty, nadal będzie on tworzył białą spację w miejscu, w którym znajduje się tytuł, nie chciałbym, aby tak się stało)


4
czy możesz oznaczyć odpowiedź jako zaakceptowaną? ;)
— Plastic

Odpowiedzi:


159

Sposobem na zrobienie tego jest ustawienie tekstu tytułu na pusty ciąg.

W takim przypadku nie ma miejsca na tytuł:

bez tekstu: http://jsfiddle.net/jlbriggs/JVNjs/284/

z tekstem: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

Jeśli chcesz mieć mniej miejsca niż w tym przypadku, po prostu ustaw parametr „marginTop” na 0

{{ edytuj z powodu licznych komentarzy :

Jak wskazano kilka razy poniżej, dokumentacja podaje teraz text: nulljako metodę osiągnięcia tego.

Każda metoda daje pożądany rezultat.


Czy mógłbyś mi na to spojrzeć? Zrobiłem wszystkie sugestie tutaj i nadal jest ogromna biała przestrzeń (zobacz przycisk drukowania unoszący się w przestrzeni w prawym górnym rogu?). Goo.gl/jHR5l
— D3Chiq

1
Myślę, że mogłem to rozwiązać. Miałem swoją legendę wyrównaną do góry, a unoszenie się na legendzie było ustawione na fałsz, stworzyło tam dla niej miejsce. Ustawiłem unoszenie się legendy na prawdę, a teraz przesunęło resztę wykresu dalej w górę.
— D3Chiq,

2
Jak wskazano poniżej, udokumentowanym rozwiązaniem jest ustawienie wartości null.
— Tom Hubbard

1
Od wersji 5.0.9jest to niepoprawne. Ustawienie tekstu w taki sposób, aby pusty ciąg generował domyślny tekst tytułu, taki jak „Tytuł wykresu” i „Wartości”.
— mwilson

@mwilson Patrzę na demo z linku w powyższej odpowiedzi, które (w momencie tego komentarza) używa wersji 5.0.9 i nadal działa z albo nulllub ''. Czy możesz rozwinąć lub zademonstrować?
— jlbriggs

61

Z dokumentu highcharts :

text: String Tytuł wykresu. Aby wyłączyć tytuł, ustaw tekst na null. Domyślnie tytuł wykresu.

skrzypce: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }

1
To jest poprawna odpowiedź, nie wiem, dlaczego nie jest to akceptowana odpowiedź. Wszystkie inne rozwiązania podane poniżej to tylko obejścia.
— Gerard,

Być może użytkownik, który zadał pytanie, po prostu zapomniał oznaczyć je jako „zaakceptowane”
— Plastic

2
prawdopodobnie dlatego, że odpowiedź na pytanie była
— poprawna

„odpowiednio” ?? co masz na myśli? ;-)
— Plastic

4
Jest to poprawne w przypadku „nowego” interfejsu API. Gdy zadano pytanie, nie było to obsługiwane. Więc oba są ważne w zależności od wersji.
— TecHunter

40

Wolę tę metodę:

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

2
Aby uzyskać nowszą wersję, odnieś się do odpowiedzi od firmy Plastic z tekstem ´text: null´
— TecHunter


13

To proste ... Ustaw tylko tekst tytułu na null. Lubię to

    $(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]        
    }]
});

});

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


1
Bazując na dokumencie, stało się to undefinedod tego zatwierdzenia github.com/highcharts/highcharts/commit/ ...
— foxiris


9

Zawsze możesz to zrobić:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

To zadziałało dla mnie :-)

uwaga: ta odpowiedź była dla version 2.*, dla nowszych wersji są lepsze odpowiedzi.


8

Zgodnie z dokumentem Highcharts, poprawnym sposobem jest ustawienie wartości „text” na wartość null.


> Tytuł wykresu. Aby wyłączyć tytuł, ustaw tekst na niezdefiniowany.
— Ini


3

W React-Native poniższy kod zadziałał dla mnie,

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

Mam nadzieję, że to pomogło.



1

Dla tych, którzy używają Typescript, możesz ustawić Highcharts.TitleOptions, aby ukryć tytuł wykresu.

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


-1

To trochę hack, ale możesz też spróbować:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.