Latest web development tutorials

Opcje konfiguracji Highcharts opisano szczegółowo

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:


Parametry konfiguracyjne (atrybuty + event)

  1. chart.events.addSeries: Dodaj liczbę kolumn na wykresie.

  2. chart.events.click: Kliknij na imprezie wystąpiła cała powierzchnia działki wykresu.

  3. chart.events.load: Impreza Wykres obciążenia.

  4. chart.events.redraw chart przerysować wydarzenie, kliknij na wystawach legendy i może wywołać ukrytą rysunek.

  5. chart.events.selection: Gdy krzywa wykresu wyboru powiększenia, należy wybrać wykres, gdy operacja może wywołać zdarzenie.

  6. chart.height: wykres wysokości wyciągnąć.

  7. chart.inverted: wykres x, osi y na giełdzie.

  8. chart.polar: czy wykresu biegunowego.

  9. chart.reflow: gdy zmiany rozmiaru okna, szerokość zmiany rozmiaru okna wykresu adaptacyjnych.

  10. chart.renderTo: ładowanie wykresu, jest obiektem DOM na stronie.

  11. chart.showAxes: pusta tablica, czy wyświetlenia osi.

  12. chart.type: typ wykresu, domyślnie linia istnieje bar / kolumna / pie ......

  13. chart.width: szerokość działki wykresu, domyślnie jest adaptacyjne.

  14. 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.

  15. kolory: Większość kolumn w tabeli, liczba kolumn między każdym kolorze. Jest tablicą, na ogół nie ruszają.

  16. kredyty .enabled: czy zezwolić na wyświetlanie informacji o prawach autorskich.

  17. credits.href: link prawami autorskimi.

  18. credits.text: informacje o prawach autorskich wyświetlacz tekstowy.

  19. eksportujących .buttons.exportButton.enabled: czy zezwolić na przycisk Eksportuj wyświetlacz.

  20. exporting.buttons.exportButton.menuItems: opcja menu przycisk Eksportuj.

  21. exporting.buttons.exportButton.onclick: przycisk Export kliknięciu zdarzenia, a nie menu wewnętrznego.

  22. exporting.buttons.printButton.enabled: czy zezwolić na przycisk Drukuj.

  23. exporting.buttons.printButton.onclick: przycisk drukowania kliknij zdarzenie.

  24. exporting.enabled: Drukowanie i eksport przyciski są dozwolone.

  25. exporting.filename: to nazwa pliku z pliku eksportu.

  26. exporting.type: domyślne formaty plików obrazu eksportu.

  27. exporting.url: SVG wykres konwersji i przetwarzania eksportu adres interfejsu.

  28. exporing.width: Domyślna szerokość obrazu eksportu.

  29. Etykiety: Etykiety mogą być ładowane w dowolnym miejscu wykresu, istnieją przedmioty, styl.

  30. lang: konfiguracja parametrów języka i związane z menu przycisku Export, imię i innym czasie konfiguracji konfiguracji.

  31. legend.enabled: czy zezwolić na legendę.

  32. navigation.buttonOptions.enabled: przyciski nawigacyjne wykresu, czy wszystko, co można kliknąć.

  33. plotOptions .area.allowPointSelect: czy zezwolić punkty kliknięcie danych.

  34. plotOptions.area.color: Rysowanie kolor.

  35. plotOptions.area.dataLabels.enabled: czy zezwolić etykiety danych.

  36. plotOptions.area.enableMouseTracking: czy zezwolić na dane w tabeli, zostanie wyświetlony punkt śledzenia myszy bańka danych.

  37. plotOptions.area.events.checkboxClick: Dane w tabeli legendy wyboru kliknij zdarzenie.

  38. plotOptions.area.events.click: wykresy danych, punkty danych kliknij zdarzenie.

  39. plotOptions.area.events.hide: Wykres danych, sekwencja danych zdarzeń, gdy ukryte.

  40. plotOptions.area.events.show: Wykres danych, sekwencja danych zdarzeń, gdy wyświetlany.

  41. plotOptions.area.events.legendItemClick: Wykres danych, legenda elementu zdarzenia kliknięcia, bezpośrednie przypisanie fałszywe, to nie jest klikalny.

  42. plotOptions.area.events.mouseOut: punkty danych myszy spośród imprezy.

  43. plotOptions.area.events.mouseOver: punkty danych myszy po wydarzeniu.

  44. plotOptions.area.marker.enabled: czy wyświetlać znacznik punktowy wykres rysunku.

  45. plotOptions.area.marker.states.hover.enabled: czy zezwolić na stan znacznika najazdu.

  46. plotOptions.area.marker.states.select.enabled: czy zezwolić na stan wyboru etykiety.

  47. plotOptions.area.point.events.click chart każdą imprezę punkt kliknięcia.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Event usunięte punkty wykres są używane.

  51. plotOptions.area.point.events.select: Wybierz imprezę Wykres środkowego.

  52. plotOptions.area.point.events.unselect: Event wykresie punkt środkowy, gdy zaznaczona.

  53. plotOptions.area.point.events.update: wydarzenie zmiana nastąpi, gdy dane na wykresie.

  54. plotOptions.area.visible: Podczas ładowania domyślne serie danych są wyświetlane lub ukrywane.

  55. plotOptions.area.zIndex: W przypadku wielu sekwencji, ustawić kolejność układania każdej sekwencji.

  56. Przede point.events samo odnosi się również do innych powierzchni diagramów klas (arearange, areaspline, areasplinerange), inne histogram (bar, kolumna) oraz wszystkich wykresach.

  57. plotOptions.area.showInLegend: czy mają być pokazywane w legendzie.

  58. plotOptions.area.stacking: wartość stosu, stosu lub w procentach.

  59. plotOptions.area.states.hover.enabled: czy zezwolić państwo umieścić myszy.

  60. plotOptions.area.stickyTracking: lepka myszy punktów danych śledzenia.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange podobny do plotOptions.area

  62. plotOptions.bar.groupPadding: Do przedziału pakietów wykresów słupkowych pomiędzy każdym pakiecie.

  63. plotOptions.bar.grouping: czy grupa danych.

  64. plotOptions.bar.minPointLength :: definiuje wartość punktu wynosi zero, punkt minimalna długość

  65. plotOptions.bar.showInLegend: czy mają być pokazywane w legendzie.

  66. plotOptions.bar.stacking: wartość w stos, stos lub w procentach (normalny / procent).

  67. plotOptions.column, plotOptions.columnrange podobny do plotOptions.bar

  68. plotOptions.line związane konfiguracja jest podobna konfiguracja plotOptions.area.

  69. 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ę.

  70. plotOptions.pie.innerSize: Podczas rysowania wykresu kołowego, centrum wykres kołowy zarezerwować dużo pustego.

  71. 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ść.

  72. 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.

  73. Seria: tablicą.

  74. series.data.color: jeden danych kolorów.

  75. series.data.dataLabels: jedna sekwencja danych etykiety danych.

  76. series.data.events podobna do konfiguracji plotOptions.area.point.events.

  77. series.data.marker podobna do konfiguracji plotOptions.area.marker.

  78. series.data.name: nazwa punktów danych konfiguracyjnych.

  79. series.data.sliced: Skonfiguruj wykres kołowy, odległość dzieląca rozmiaru sektora.

  80. series.data.x: x wartość punktu.

  81. series.data.y: y wartość punktu.

  82. series.name: nazwa sekwencji danych.

  83. series.stack: skumulowany wskaźnik grupy.

  84. series.type: sekwencja danych typu wyświetlacza.

  85. series.xAxis, series.yAxis: przy użyciu wielu osiach, które określa oś odpowiada liczbie kolumn.

  86. napisy: Konfiguracja napisów wykresu.

  87. tytuł: tytuł konfiguracji wykresu.

  88. podpowiedź: Konfiguracja danych szybkich bańka na wykresie.

  89. tooltip.valueDecimals: Pozwól miejsc po przecinku.

  90. tooltip.percentageDecimals: Pozwól procent miejsc po przecinku.

  91. ustawienia konfiguracji osi OśX, yAxis

  92. allowDecimals: czy zezwolić na dziesiętne osi.

  93. Kategorie: tablica osiach klasyfikacyjnych.

  94. wątków: Draw główną linię.

  95. tickColor: skala kolorów.

  96. tickInterval: skala wartości kroku.

  97. labels.rotation: Skala Etykiety stopień obrotu

Wykres: Opcja obszar wykresu

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.

Kolor: Opcje kolorów

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

Tytuł: Tytuł Opcje

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 napisów: Napisy

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.


OśX Opcja: oś X

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 osi Y: yAxis

Opcja Oś Y jest zgodna z powyższych opcji OśX, proszę zapoznać się z tabelą w parametrze ustawienia nie zostały wymienione osobno.


Seria: Dane opcje kolumn

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: opcje punktów danych

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;}

Tooltip: punkty danych balonu

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 Option

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