Jak wyrównać wyśrodkować etykietę niestandardową w highcharts

Zobacz a jsfiddle example Jak wyrównać wyśrodkować etykietę niestandardową w highcharts

labels: { 
     items : [{ 
      html : 'Center Me!', 
      style : { 
       left : '0px', 
       top : '-15px', 
       fontSize : '20px' 
      } 
     }] 
    }

Próbuję wyrównać niestandardową etykietę w/etykiety/pozycje JSON elementu powiesić tuż pod tytułem i podtytułem.

Gra z firebugiem Mogę zmienić element tekstowy SVG dla etykiety i dodać text-align = 'middle' i zmienić atrybut x = '' na taką samą wartość, jak atrybut x tytułu. To sprawia, że idealnie dopasowuje się pod tytułem i pozostaje tam po zmianie rozmiaru, ale nie mogę wymyślić, jak sprawić, by biblioteka Highcharts generowała to źródło.

Być może istnieje lepszy sposób dodania innej etykiety pod podtytułem?

Źródło

2011-10-09 Chrissy

O której "niestandardowej etykiecie" mówisz? etykieta osi, etykieta punktowa, własna etykieta, ... Gdzie to jest? Czy możesz to wyjaśnić? –

Pierwszy raz używając jsfiddle i wygląda na to, że "nie zapisałem poprawnie zmian". Spójrz jeszcze raz na powyższy link i powinieneś zobaczyć, jak dodaję etykietę. Zrobiłem szybkie zanurzenie się w js dla highchartów i wygląda na to, że wymagają absolutnej lewej i najwyższej pozycji. Ale może coś przeoczyłem? W każdym razie, na razie właśnie przeprojektowałem swój tytuł i podtytuł, więc nie potrzebuję drugiej etykiety. Oto fragment. Etykiety: '{ pozycje: [{ html: 'Centrum Me!', styl: { lewej:„0px'' ... – Chrissy

Masz rację, etykiety wymaga górną i lewą właściwości w pikselach być ustawione. Redesign title + subtitle był dobrym pomysłem. Innym rozwiązaniem może być użycie 'renderer.text()', tam również musisz ustawić górne i lewe, ale może to być zrobione po renderowaniu wykresu, abyś mógł obliczyć pozycję przed (używając 'chart.plotTop',' wykres .plotLeft' itp.) –

Szybka poprawka: Dodaj to do ciebie stylu

lewej: '160px'

Źródło

2012-09-24 09:36:34

-1

użyłem percetange zamiast.

  left:300%

Sprawdź to jfiddle http://jsfiddle.net/F2erm/146/

Źródło

2015-07-11 06:52:16

Zmniejsz rozmiar okna i zobacz, gdzie jest Twoja etykieta ... –

Jeśli chcesz, możesz także dodać element HTML po wykres został wygenerowany zrobić ten efekt (patrz przykład na http://jsfiddle.net/brightmatrix/5517s8zb/1/).

W tym przypadku, aby uzyskać właściwy wyśrodkowany efekt, konieczne jest jawne zdefiniowanie szerokości div kontenera.

<div id="container" style="height: 400px; width: 100%"></div>

Oto element HTML:

/* add an HTML element to the chart starting at 0px from the left corner and 
    10% of the container's height from the top */ 
chart.renderer.html('<div align="center" style="font-size: 20px; width: ' + 
$('#container').width() + 'px">Center Me!</div>',0,$('#container').height()*.1).add();

Zrobiłem 10% wysokości pojemnika, aby pomóc pozycja bardziej elastyczne. Możesz także dodać lub odjąć określone wymiary piksela, dopóki nie ustawisz go tam, gdzie chcesz.

Mam nadzieję, że to będzie pomocne!

Źródło

2016-01-20 12:46:00

Jak wyrównać wyśrodkować etykietę niestandardową w highcharts

Odpowiedz

Powiązane problemy