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.