Najlepszy samouczek Opcje konfiguracji Highcharts opisano szczegółowo W 2024 r. W tym samouczku możesz dowiedzieć się Parametry konfiguracyjne (atrybuty + event),Wykres: Opcja obszar wykresu,Kolor: Opcje kolorów,Tytuł: Tytuł Opcje,Opcje napisów: Napisy,OśX Opcja: oś X,Opcja osi Y: yAxis,Seria: Dane opcje kolumn,plotOptions: opcje punktów danych,Tooltip: punkty danych balonu,Legenda: Legenda Option,
Highcharts opcje konfiguracyjne dostarczają wiele parametrów, można łatwo dostosować do wymagań użytkownika wykresy w tej sekcji, aby dowiedzieć się więcej opcji konfiguracyjnych Highcharts do wykorzystania:
chart.events.addSeries: Dodaj liczbę kolumn na wykresie.
chart.events.click: Kliknij na imprezie wystąpiła cała powierzchnia działki wykresu.
chart.events.load: Impreza Wykres obciążenia.
chart.events.redraw chart przerysować wydarzenie, kliknij na wystawach legendy i może wywołać ukrytą rysunek.
chart.events.selection: Gdy krzywa wykresu wyboru powiększenia, należy wybrać wykres, gdy operacja może wywołać zdarzenie.
chart.height: wykres wysokości wyciągnąć.
chart.inverted: wykres x, osi y na giełdzie.
chart.polar: czy wykresu biegunowego.
chart.reflow: gdy zmiany rozmiaru okna, szerokość zmiany rozmiaru okna wykresu adaptacyjnych.
chart.renderTo: ładowanie wykresu, jest obiektem DOM na stronie.
chart.showAxes: pusta tablica, czy wyświetlenia osi.
chart.type: typ wykresu, domyślnie linia istnieje bar / kolumna / pie plplpl
chart.width: szerokość działki wykresu, domyślnie jest adaptacyjne.
chart.zoomType: dane typu amplifikacji w tabeli raportu, można powiększyć do osi X lub osi Y zoom można powiększyć XY osi jednocześnie.
kolory: Większość kolumn w tabeli, liczba kolumn między każdym kolorze. Jest tablicą, na ogół nie ruszają.
kredyty .enabled: czy zezwolić na wyświetlanie informacji o prawach autorskich.
credits.href: link prawami autorskimi.
credits.text: informacje o prawach autorskich wyświetlacz tekstowy.
eksportujących .buttons.exportButton.enabled: czy zezwolić na przycisk Eksportuj wyświetlacz.
exporting.buttons.exportButton.menuItems: opcja menu przycisk Eksportuj.
exporting.buttons.exportButton.onclick: przycisk Export kliknięciu zdarzenia, a nie menu wewnętrznego.
exporting.buttons.printButton.enabled: czy zezwolić na przycisk Drukuj.
exporting.buttons.printButton.onclick: przycisk drukowania kliknij zdarzenie.
exporting.enabled: Drukowanie i eksport przyciski są dozwolone.
exporting.filename: to nazwa pliku z pliku eksportu.
exporting.type: domyślne formaty plików obrazu eksportu.
exporting.url: SVG wykres konwersji i przetwarzania eksportu adres interfejsu.
exporing.width: Domyślna szerokość obrazu eksportu.
Etykiety: Etykiety mogą być ładowane w dowolnym miejscu wykresu, istnieją przedmioty, styl.
lang: konfiguracja parametrów języka i związane z menu przycisku Export, imię i innym czasie konfiguracji konfiguracji.
legend.enabled: czy zezwolić na legendę.
navigation.buttonOptions.enabled: przyciski nawigacyjne wykresu, czy wszystko, co można kliknąć.
plotOptions .area.allowPointSelect: czy zezwolić punkty kliknięcie danych.
plotOptions.area.color: Rysowanie kolor.
plotOptions.area.dataLabels.enabled: czy zezwolić etykiety danych.
plotOptions.area.enableMouseTracking: czy zezwolić na dane w tabeli, zostanie wyświetlony punkt śledzenia myszy bańka danych.
plotOptions.area.events.checkboxClick: Dane w tabeli legendy wyboru kliknij zdarzenie.
plotOptions.area.events.click: wykresy danych, punkty danych kliknij zdarzenie.
plotOptions.area.events.hide: Wykres danych, sekwencja danych zdarzeń, gdy ukryte.
plotOptions.area.events.show: Wykres danych, sekwencja danych zdarzeń, gdy wyświetlany.
plotOptions.area.events.legendItemClick: Wykres danych, legenda elementu zdarzenia kliknięcia, bezpośrednie przypisanie fałszywe, to nie jest klikalny.
plotOptions.area.events.mouseOut: punkty danych myszy spośród imprezy.
plotOptions.area.events.mouseOver: punkty danych myszy po wydarzeniu.
plotOptions.area.marker.enabled: czy wyświetlać znacznik punktowy wykres rysunku.
plotOptions.area.marker.states.hover.enabled: czy zezwolić na stan znacznika najazdu.
plotOptions.area.marker.states.select.enabled: czy zezwolić na stan wyboru etykiety.
plotOptions.area.point.events.click chart każdą imprezę punkt kliknięcia.
plotOptions.area.point.events.mouseOut
plotOptions.area.point.eventsplmouseOver
plotOptions.area.point.events.remove: Event usunięte punkty wykres są używane.
plotOptions.area.point.events.select: Wybierz imprezę Wykres środkowego.
plotOptions.area.point.events.unselect: Event wykresie punkt środkowy, gdy zaznaczona.
plotOptions.area.point.events.update: wydarzenie zmiana nastąpi, gdy dane na wykresie.
plotOptions.area.visible: Podczas ładowania domyślne serie danych są wyświetlane lub ukrywane.
plotOptions.area.zIndex: W przypadku wielu sekwencji, ustawić kolejność układania każdej sekwencji.
Przede point.events samo odnosi się również do innych powierzchni diagramów klas (arearange, areaspline, areasplinerange), inne histogram (bar, kolumna) oraz wszystkich wykresach.
plotOptions.area.showInLegend: czy mają być pokazywane w legendzie.
plotOptions.area.stacking: wartość stosu, stosu lub w procentach.
plotOptions.area.states.hover.enabled: czy zezwolić państwo umieścić myszy.
plotOptions.area.stickyTracking: lepka myszy punktów danych śledzenia.
plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange podobny do plotOptions.area
plotOptions.bar.groupPadding: Do przedziału pakietów wykresów słupkowych pomiędzy każdym pakiecie.
plotOptions.bar.grouping: czy grupa danych.
plotOptions.bar.minPointLength :: definiuje wartość punktu wynosi zero, punkt minimalna długość
plotOptions.bar.showInLegend: czy mają być pokazywane w legendzie.
plotOptions.bar.stacking: wartość w stos, stos lub w procentach (normalny / procent).
plotOptions.column, plotOptions.columnrange podobny do plotOptions.bar
plotOptions.line związane konfiguracja jest podobna konfiguracja plotOptions.area.
plotOptions.pie.ignoreHiddenPoint: Na wykresie kołowym, konkretna sekwencja przez Legend kliknij, aby ukryć, cały wykres kołowy jest 100% przekwalifikowania lub ukryte wyłącznie na podstawie oryginału, pokazując lukę.
plotOptions.pie.innerSize: Podczas rysowania wykresu kołowego, centrum wykres kołowy zarezerwować dużo pustego.
plotOptions.pie.slicedOffset: allowPointSelect używać w połączeniu z, gdy punkt kliknięciu odpowiedni skórki Sektor ten parametr konfiguracyjny, który jest odsunięty na odległość.
Inne typowej konfiguracji parametrów plotOptions.pie podobieństwo do plotOptions.area, plotOptions.scatter, plotOptions.series, plotOptions.spline związane Konfiguracja Konfiguracja podobna plotOptions.area.
Seria: tablicą.
series.data.color: jeden danych kolorów.
series.data.dataLabels: jedna sekwencja danych etykiety danych.
series.data.events podobna do konfiguracji plotOptions.area.point.events.
series.data.marker podobna do konfiguracji plotOptions.area.marker.
series.data.name: nazwa punktów danych konfiguracyjnych.
series.data.sliced: Skonfiguruj wykres kołowy, odległość dzieląca rozmiaru sektora.
series.data.x: x wartość punktu.
series.data.y: y wartość punktu.
series.name: nazwa sekwencji danych.
series.stack: skumulowany wskaźnik grupy.
series.type: sekwencja danych typu wyświetlacza.
series.xAxis, series.yAxis: przy użyciu wielu osiach, które określa oś odpowiada liczbie kolumn.
napisy: Konfiguracja napisów wykresu.
tytuł: tytuł konfiguracji wykresu.
podpowiedź: Konfiguracja danych szybkich bańka na wykresie.
tooltip.valueDecimals: Pozwól miejsc po przecinku.
tooltip.percentageDecimals: Pozwól procent miejsc po przecinku.
ustawienia konfiguracji osi OśX, yAxis
allowDecimals: czy zezwolić na dziesiętne osi.
Kategorie: tablica osiach klasyfikacyjnych.
wątków: Draw główną linię.
tickColor: skala kolorów.
tickInterval: skala wartości kroku.
labels.rotation: Skala Etykiety stopień obrotu
Opcja Wykres obszar wykresu obszar wykresu służy do ustawienia właściwości.
parametry | opis | Domyślnie |
---|---|---|
backgroundColor | Ustawianie obszar wykresu kolor tła | #FFFFFF |
borderWidth | Ustaw szerokość wykresu granicznej | 0 |
borderRadius | Ustawianie granicy, zaokrąglonymi kątami | 5 |
renderTo | Wykres umieszczenie pojemników, na ogół umieszczone w html DIV, uzyskać wartość atrybutu id DIV | NULL |
defaultSeriesType | Domyślnym typem wykres liniowy, spline, obszaru, areaspline, kolumna, bar, ciasto, rozrzut | 0 |
szerokość | szerokość wykresu, zgodnie z pojemnika wykres Domyślna szerokość adaptacyjnych | NULL |
wysokość | Wykres wysokości, pojemnik domyślny wykres zależności wysoce adaptacyjne | NULL |
margines | I inne elementy w tablicy skoku wykresu, takich jak [0,0,0,0] | [Null] |
plotBackgroundColor | Kolor tła głównym obszar wykresu kolor tła, osie X i Y z obszaru zamkniętego | NULL |
plotBorderColor | Kolor regionie granicznym graniczy główny wykres, osie X i Y z obszaru zamkniętego | NULL |
plotBorderWidth | Szerokość głównego granicy obszaru wykresu | 0 |
cień | Cień jest ustawiony, trzeba ustawić backgroundColor kolor tła. | fałszywy |
reflow | Czy stosując obszar wykresu z wysokości i szerokości, jeśli nie ustawić szerokość i wysokość, wielkość będzie adaptacyjne. | prawdziwy |
zoomType | Przeciągnij myszą, aby powiększyć, zoom wzdłuż osi X lub Y, można ustawić na: 'x', 'y', '' xy | '' |
wydarzenia | Zdarzenie oddzwaniania metody addSeries wsparcia kliknij, metoda obciążenia, metody doboru funkcji zwrotnej. |
Opcje kolorów do ustawiania kolorów skali barw.
parametry | opis | Domyślnie |
kolor | Na kolorowym wyświetlaczem, tablicą wykresów, linia / bar / wykresu kołowego tak dalej. | szyk |
Highcharts zapewnia już kilka domyślnego schematu kolorów, jeśli chcesz wyświetlać kolorową grafikę ponad rodzaju, więcej grafiki automatycznie rozpocznie się od pierwszego wyboru kolorystyki. Niestandardowe podejście kolorystyka:
Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });
Opcja Podpis Tytuł można ustawić odpowiednie właściwości tytułu wykresu.
parametry | opis | Domyślnie |
---|---|---|
tekst | Tytuł tekstu. | tytuł Wykres |
wyrównać | poziome wyrównanie. | centrum |
verticalAlign | Wyrównanie w pionie. | top |
margines | Pomiędzy głównym tytule i napisów lub wykresu zakresie skoku. | 15 |
ruchomy | Niezależnie od tego, pływających, jeśli jest prawdziwa, tytuł może być odsunięta od głównego obszaru wykresu, z x, y atrybutu. | fałszywy |
styl | Zestaw stylów CSS. | {Color: '# 3E576F " fontSize: '16px'} |
Opcje Property napisów zapewniają zasadniczo taki sam tytuł, tytuł, tytuł może odnosić się do powyższych opcji, warto wspomnieć, że podtytuł domyślnie opcja Text To '', która jest pusta, więc napisy nie są wyświetlane domyślnie.
Opcja oś X jest używany do ustawiania wykresie oś X związane właściwości.
parametry | opis | Domyślnie |
---|---|---|
kategorie | Ustaw nazwy kategorii oś X, tablice, na przykład: kategorie: [ "Jabłka", "Bananas", "Pomarańcze"] | [] |
tytuł | Nazwa osi X, tekst wsparcia, pozwoliła wyrównać, obrót, styl i inne atrybuty | |
etykiety | Ustaw oś X każdej nazwy kategorii Styli, format formater, kąt obrotu i tym podobne. | szyk |
max | Oś X maksymalna wartość (kategoria jest pusta), jeśli jest pusty, wówczas maksymalna wartość automatycznie dopasować dane osi X do maksimum. | NULL |
min | Minimalna oś X (kategoria jest pusta), jeśli jest zerowy, to wartość minimalna automatycznie dopasuje dane oś X do minimum. | szyk |
gridLineColor | Siatka (w pionie) Kolor | # C0C0C0 |
gridLineWidth | Siatka (pionowa kreska) Szerokość | 1 |
lineColor | kolor bazowy | # C0D0E0 |
linewidth | szerokość linii bazowej | 0 |
Opcja Oś Y jest zgodna z powyższych opcji OśX, proszę zapoznać się z tabelą w parametrze ustawienia nie zostały wymienione osobno.
Opcja Kolumny danych służy do ustawienia wykresu pokazują dane dotyczące właściwości.
parametry | opis | Domyślnie |
---|---|---|
dane | Wyświetlona w kolumnie danych wykresu, który może być tablicą lub JSON sformatowanych danych. Takich jak: dane: [0, 5, 3, 5], lub Dane: [{name: 'Punkt 1', y: 0}, {name: 'Punkt 2', y: 5}] | '' |
nazwa | Wyświetla nazwę kolumny danych. | '' |
typ | Typy danych kolumny, obszar wsparcia, areaspline, bar, kolumna, wiersz, ciasto, rozproszenia lub spline | linia |
plotOptions używana do ustawienia punktów danych wykresu właściwości związanych. plotOptions Według różnych typów wykresów, ich właściwości ustawione nieco inny, obecnie powszechnie używane opcje wymienione.
parametry | opis | Domyślnie |
włączone | Dane wyświetlane są bezpośrednio na punkty danych | fałszywy |
allowPointSelect | Czy zezwolić na korzystanie z myszy, aby wybrać punkty danych | fałszywy |
formater | Funkcja oddzwaniania, format wyświetlania danych | formater: function () {return this.y;} |
Etykietka informacji ustawienie szybkiego okno, gdy zostanie wyświetlony punkt myszy Dane slajdów.
parametry | opis | Domyślnie |
włączone | Niezależnie od tego, aby wyświetlić okno wiersza | prawdziwy |
backgroundColor | Ustaw kolor tła balon | rgba (255, 255, 255, 0,85) |
borderColor | Balon kolor obramowania, kolumna domyślna danych automatycznie dopasować kolor | automatyczny |
borderRadius | Balon okrągły kąt | 5 |
cień | Czy mają być wyświetlane w wierszu cienie skrzynkowych | prawdziwy |
styl | Ustawianie stylów treści balon, takich jak kolor czcionki, itp | kolor: '# 333' |
formater | Funkcja oddzwaniania do formatowania wyjścia wyświetlaczu balonu. Powrót treść Wsparcie takie jak znaczniki HTML: <b> <strong>, <i>, <em> <br/>, <span> | 2 |
Legenda Legenda służy do ustawienia właściwości.
parametry | opis | Domyślnie |
---|---|---|
układ | Format wyświetlania, pionowy poziom pionowy i poziomy wsparcia | poziomy |
wyrównać | Wyrównanie. | centrum |
backgroundColor | Legenda kolor tła. | NULL |
borderColor | Legenda kolor obramowania. | # 909090 |
borderRadius | Legenda kąta granicznego | 5 |
włączone | Niezależnie od tego, aby wyświetlić legendę | prawdziwy |
ruchomy | Mogę pływać, a x, y właściwości. | fałszywy |
cień | Czy wyświetlać cienie | fałszywy |
styl | Zawartość stylu legendy | '' |
Więcej szczegółowych informacji można znaleźć na oficjalnej stronie dokumentacji highcharts angielskich: http://api.highcharts.com/highcharts