Histogram

Omówienie

Hisogram to wykres, który grupuje dane liczbowe w przedziałach, wyświetlając przedziały w postaci kolumn posegmentowanych. Służą do przedstawienia rozkładu zbioru danych, czyli tego, jak często wartości mieszczą się w zakresach.

Liczbę przedziałów znajdziesz automatycznie. Wszystkie przedziały mają taką samą szerokość i wysokość proporcjonalną do liczby punktów danych w koszyku. Pod innymi względami histogramy są podobne do wykresów kolumnowych.

Przykład

Oto histogram długości dinozaurów:

Histogram informuje, że najpopularniejszy pojemnik to mniej niż 10 metrów, a tylko jeden dinozaur ma ponad 40 metrów. Najeżdżając wskaźnikiem myszy na słupek, możemy odkryć, że sejszaur to sejszozaur (może to być bardzo duży diplodok, a paleontolodzy nie mają pewności).

Poniżej znajduje się kod do wygenerowania tego histogramu. Po zdefiniowaniu danych (w tym miejscu i za pomocą funkcji google.visualization.arrayToDataTable) wykres jest definiowany za pomocą wywołania metody google.visualization.Histogram i rysowany metodą draw.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Etykiety (tutaj, nazwy dinozaurów) można pominąć – w takim przypadku etykietki będą zawierać tylko wartość liczbową.

Kontrola kolorów

Oto histogram populacji krajów:

Na świecie jest ponad 200 krajów, których populacja jest mniejsza niż 100 milionów, a później bardzo szybko spada.

Ten histogram korzysta z opcji colors, aby narysować dane w kolorze zielonym:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Tak jak na wszystkich wykresach Google, kolory można określić jako angielskie nazwy lub jako wartości szesnastkowe.

Zarządzanie zasobnikami

Domyślnie Wykresy Google automatycznie wybierają rozmiar zasobnika za pomocą dobrze znanego algorytmu histogramów. Czasami trzeba jednak zastąpić to ustawienie. Wykres powyżej przedstawia przykład. W pierwszej grupie jest tak wiele krajów, że trudno jest sprawdzić je w innych.

W takich sytuacjach na wykresie histogramu dostępne są 2 opcje: histogram.bucketSize, która zastępuje algorytm i zakoduje na stałe rozmiar zasobnika, oraz histogram.lastBucketPercentile. Druga opcja wymaga więcej wyjaśnień: zmienia obliczenie rozmiarów zasobników w taki sposób, aby ignorowały wartości, które są wyższe lub niższe od wartości reszty o określoną wartość procentową. Wartości są nadal uwzględniane w histogramie, ale nie mają wpływu na sposób ich grupowania. Jest to przydatne, gdy nie chcesz, aby wartości odstające trafiły do ich własnych segmentów. Zamiast tego zostaną zgrupowane z pierwszym lub ostatnim segmentem.

Na powyższym wykresie pominęliśmy 5 najwyższych i ostatnich 5 procent wartości przy obliczaniu rozmiaru zasobnika. Wartości są nadal wyświetlane na wykresie. Zmienił się tylko rozmiar zasobnika, ale dzięki temu histogram jest bardziej czytelny.

Ten przykład pokazuje również, jak można zmienić skalę osi pionowej, by użyć skali „odbicia lustrzanego logu”, co pomaga również przy wykresach danych, które składają się z długich ogonów o małych wartościach.

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Jak widać, usunięcie z obliczenia górnych i dolnych 5% spowodowało, że rozmiar zasobnika wynosił 10 000 000, a nie 100 000 000, które byłoby inaczej. Gdyby od początku wiedzieli Państwo, że rozmiar grupy 10 milionów jest satysfakcjonujący, można wykorzystać histogram.bucketSize:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

W poniższym przykładzie pokazujemy, jak zwiększyć zakres zasobników i wyświetlić znacznie więcej zasobników bez żadnych przerw. Za pomocą opcji maxNumBuckets można zwiększyć domyślną liczbę zasobników. Opcje histogram.minValue i histogram.maxValue zwiększą zakres zasobników, ale pamiętaj, że jeśli istnieją dane spoza tego zakresu, opcje te nie zmniejszą zakresu.

Ten przykład pokazuje również, że można określić znaczniki, które mają być wyświetlane dla każdego zasobnika, za pomocą jawnej opcji ticks dla hAxis. Nie ma to wpływu na same zasobniki, a jedynie na sposób wyświetlania znaczników.

Pamiętaj też, że określamy chartArea.width w taki sposób, aby liczba zasobników zmieściła się dokładniej bez widocznych artefaktów. Oto opcje dostępne dla tego przykładu.

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Wiele serii

Oto histogram ładunków cząstek subatomowych według modelu standardowego:

Powyższy wykres zawiera 1 serię zawierającą wszystkie cząstki. Cząstki subatomowe można podzielić na 4 grupy: kwarki, leptony i boony. Omówmy każdy z nich jako odrębną serię:

Na tym wykresie używamy innej serii (a tym samym koloru) dla każdego z 4 typów cząstek subatomowych. Jawnie ustawiamy interpolateNulls na false, aby mieć pewność, że wartości null (potrzebne, ponieważ serie mają nierówną długość) nie są generowane. Ustawiono też legend.maxLines, by dodać kolejny wiersz do legendy:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

Wczytuję

Nazwa pakietu google.charts.load to "corechart".

  google.charts.load("current", {packages: ["corechart"]});

Nazwa klasy wizualizacji to google.visualization.Histogram:

  var visualization = new google.visualization.Histogram(container);

Format danych

Istnieją 2 sposoby wypełniania tabeli danych histogramu. Gdy mamy tylko jedną serię:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...a jeśli istnieje wiele serii:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

Obecnie dla histogramów nie są obsługiwane żadne opcjonalne role kolumn.

Opcje konfiguracji

Nazwa
animation.duration

Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji.

Typ: liczba
Wartość domyślna: 0
animation.easing

Funkcja wygładzania zastosowana do animacji. Dostępne są te ustawienia:

  • „liniowy” – stała prędkość.
  • „W” – Przyspiesz, zacznij powoli i powoli.
  • „out” – zwolnij – zacznij szybko i spokojnie.
  • 'inAndOut' – przyspieszasz i zwalniasz – zaczynaj powoli, potem przyspiesz, a potem zwolnij.
Typ: ciąg znaków
Domyślnie: „liniowy”
animation.startup

Określa, czy wykres będzie animowany przy pierwszym rysowaniu. Jeśli parametr ma wartość true, wykres rozpocznie się od punktu odniesienia i zostanie animowany do stanu końcowego.

Typ: wartość logiczna
Domyślnie fałsz
axisTitlesPosition

Gdzie umieszczać tytuły osi w porównaniu z obszarem wykresu. Obsługiwane wartości:

  • w – narysuj tytuły osi w obszarze wykresu.
  • na zewnątrz – narysuj tytuły osi poza obszarem wykresu.
  • brak – pomija tytuły osi.
Typ: ciąg znaków
Domyślnie: „out”
backgroundColor

Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. 'red' lub '#00cc00', albo obiekt o następujących właściwościach.

Typ: ciąg znaków lub obiekt
Domyślnie: „white”
backgroundColor.stroke

Kolor obramowania wykresu jako ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: „#666”.
backgroundColor.strokeWidth

Szerokość obramowania w pikselach.

Typ: liczba
Wartość domyślna: 0
backgroundColor.fill

Kolor wypełnienia wykresu jako ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: „white”
bar.groupWidth
Szerokość grupy słupków podana w jednym z tych formatów:
  • Piksele (np. 50).
  • Procent dostępnej szerokości dla każdej grupy (np. „20%”), gdzie „100%” oznacza, że między grupami nie ma spacji.
Typ: liczba lub ciąg znaków.
Domyślny: złoty współczynnik, czyli około „61,8%”.
chartArea

Obiekt z elementami służącymi do konfigurowania miejsca docelowego i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: liczba lub liczba, po której następuje znak %. Prosta liczba to wartość w pikselach, po której następuje znak %, a po nim wartość procentowa. Przykład: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Typ: obiekt
Wartość domyślna:null
chartArea.backgroundColor
Kolor tła obszaru wykresu. Używany ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielską nazwę koloru. Jeśli używany jest obiekt, można podać te właściwości:
  • stroke: kolor podany w postaci ciągu szesnastkowego lub angielskiej nazwy koloru.
  • strokeWidth: jeśli jest podany, rysuje obramowanie wokół obszaru wykresu o podanej szerokości (i w kolorze stroke).
Typ: ciąg znaków lub obiekt
Domyślnie: „white”
chartArea.left

Jak daleko od lewej krawędzi należy narysować wykres.

Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
chartArea.top

Odległość wykresu od górnej krawędzi.

Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
chartArea.width

Szerokość obszaru wykresu.

Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
chartArea.height

Wysokość obszaru wykresu.

Typ: liczba lub ciąg znaków.
Domyślnie automatycznie
kolory

Kolory elementów wykresu. Tablica ciągów znaków, w których każdy element jest ciągiem znaków koloru HTML, np. colors:['red','#004411'].

Typ: tablica ciągów znaków
Domyślne:kolory domyślne
dataOpacity

Przezroczystość punktów danych – wartość 1,0 oznacza całkowitą nieprzezroczystość, a wartość 0,0 – pełną przezroczystość. Na wykresach punktowych, histogramach, słupkowych i kolumnowych oznacza to widoczne dane: kropki na wykresie punktowym, a na innych prostokątach – prostokąty. Na wykresach, na których wybór danych powoduje utworzenie kropki (np. na wykresach liniowych i warstwowych), odnosi się ona do okręgów widocznych po najechaniu kursorem lub zaznaczeniu. Wykres mieszany prezentuje oba zachowania i ta opcja nie ma wpływu na inne wykresy. Aby dowiedzieć się, jak zmienić przezroczystość linii trendu, przeczytaj o przezroczystości linii trendu .

Typ: liczba
Wartość domyślna: 1,0
enableInteractivity

Określa, czy wykres generuje zdarzenia dotyczące użytkowników czy reaguje na interakcję użytkownika. Jeśli ma wartość false (fałsz), wykres nie będzie wywoływać zdarzenia „select” ani innych zdarzeń związanych z interakcją (ale będzie generować zdarzenia gotowe lub zdarzenia błędu) i nie będzie wyświetlać tekstu wyświetlanego po najechaniu kursorem ani w inny sposób zmieniać się w zależności od danych wejściowych użytkownika.

Typ: wartość logiczna
Wartość domyślna:true (prawda)
focusTarget

Typ elementu, który zostanie zaznaczony po najechaniu kursorem myszy. Wpływa też na to, który element jest wybierany kliknięciem myszy i który element tabeli danych jest powiązany ze zdarzeniami. Może to być:

  • „datum” – skup się na pojedynczym punkcie danych. Odpowiada komórce w tabeli danych.
  • „kategoria” – skup się na grupowaniu wszystkich punktów danych wzdłuż głównej osi. Odpowiada wierszowi w tabeli danych.

W polu „category” (kategoria) etykietka pokazuje wszystkie wartości kategorii. Ta opcja może przydać się do porównywania wartości różnych serii.

Typ: ciąg znaków
Wartość domyślna: „datum”.
fontSize

Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu.

Typ: liczba
Domyślne:automatyczne
fontName

Domyślna krój czcionki dla całego tekstu na wykresie. Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu.

Typ: ciąg znaków
Wartość domyślna: „Blogger”
forceIFrame

Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame).

Typ: wartość logiczna
Wartość domyślna: fałsz.
hAxis

Obiekt z elementami umożliwiającymi konfigurowanie różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Typ: obiekt
Wartość domyślna:null
hAxis.gridlines

Obiekt z właściwościami służącymi do konfigurowania linii siatki na osi poziomej. Pamiętaj, że linie siatki na osi poziomej są rysowane w pionie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób:

{color: '#333', minSpacing: 20}
Typ: obiekt
Wartość domyślna:null
hAxis.gridlines.color

Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: „#CCC”.
hAxis.gridlines.count

Przybliżona liczba poziomych linii siatki w obszarze wykresu. Jeśli podasz liczbę dodatnią dla elementu gridlines.count, zostanie ona użyta do obliczenia wartości minSpacing między liniami siatki. Możesz podać wartość 1, by narysować tylko jedną linię siatki, lub wartość 0, by nie rysować linii siatki. Aby automatycznie obliczać liczbę linii siatki na podstawie innych opcji, podaj wartość domyślną –1.

Typ: liczba
Wartość domyślna: -1
hAxis.gridlines.interval

Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji gridlines.units.<unit>.interval, które są używane tylko dla dat i godzin. W przypadku skal liniowych wartość domyślna to [1, 2, 2.5, 5], co oznacza, że wartości linii siatki mogą występować w każdej jednostce (1), w jednostkach parzystych (2) lub wielokrotnościach 2,5 lub 5. Uwzględniana jest też dowolna potęga 10-krotności tych wartości (np. [10, 20, 25, 50] i [,1, 0,2, 0,25, 0,5]). W przypadku skal logicznych wartość domyślna to [1, 2, 5].

Typ: liczba od 1 do 10 (bez 10).
Wartość domyślna: obliczone.
hAxis.gridlines.minSpacing

Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx. Wartość domyślna głównych linii siatki to 40 dla skal liniowych i 20 dla skal logicznych. Jeśli podasz count, a nie minSpacing, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast określisz właściwość minSpacing, a nie count, liczba zostanie obliczona na podstawie parametru minSpacing. Jeśli podasz obie te wartości, minSpacing zastąpi.

Typ: liczba
Wartość domyślna: obliczone.
hAxis.gridlines.multiple

Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana. Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość gridlines.multiple = 1, lub wymuszaniem, aby były wielokrotnościami liczby 1000, podając wartość gridlines.multiple = 1000.

Typ: liczba
Wartość domyślna: 1
hAxis.gridlines.units

Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund.

Ogólny format to:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Więcej informacji znajdziesz w sekcji Daty i godziny.

Typ: obiekt
Wartość domyślna:null
hAxis.minorGridlines

Obiekt z elementami służącymi do konfigurowania podrzędnych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines.

Typ: obiekt
Wartość domyślna:null
hAxis.minorGridlines.color

Kolor poziomych mniejszych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślny: połączenie koloru linii siatki i koloru tła.
hAxis.minorGridlines.count

Opcja minorGridlines.count jest w większości wycofana z wyjątkiem wyłączenia podrzędnych linii siatki przez ustawienie liczby na 0. Liczba podrzędnych linii siatki zależy teraz całkowicie od odstępu między głównymi liniami siatki (patrz hAxis.gridlines.interval) a minimalną wymaganą ilość miejsca (patrz hAxis.minorGridlines.minSpacing).

Typ: liczba
Wartość domyślna: 1
hAxis.minorGridlines.interval

Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki. Domyślny interwał dla skal liniowych to [1, 1.5, 2, 2.5, 5], a dla skal logicznych to [1, 2, 5].

Typ: liczba
Wartość domyślna: 1
hAxis.minorGridlines.minSpacing

Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych.

Typ: liczba
Default (wartość domyślna): obliczone
hAxis.minorGridlines.multiple

Tak samo jak w przypadku głównych gridlines.multiple.

Typ: liczba
Wartość domyślna: 1
hAxis.minorGridlines.units

Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund.

Ogólny format to:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Więcej informacji znajdziesz w sekcji Daty i godziny.

Typ: obiekt
Wartość domyślna:null
hAxis.textPosition

Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”.

Typ: ciąg znaków
Domyślnie: „out”
hAxis.textStyle

Obiekt określający styl tekstu osi poziomej. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.title

Właściwość hAxis, która określa tytuł osi poziomej.

Typ: ciąg znaków
Wartość domyślna:null
hAxis.titleTextStyle

Obiekt określający styl tekstu tytułu osi poziomej. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

W przypadku wartości false (fałsz) najbardziej zewnętrzne etykiety będą ukryte, zamiast zezwalać na ich przycinanie przez kontener wykresu. Jeśli ma wartość Prawda, przycinanie etykiet jest dozwolone.

Typ: wartość logiczna
Wartość domyślna: fałsz.
hAxis.slantedText

Jeśli ma wartość prawda, narysuj tekst na osi poziomej pod kątem, aby dopasować większy tekst wzdłuż osi. Jeśli nie, narysuj tekst osi poziomej pionowo. Jeśli tekst jest przechylony pionowo, domyślnie nie zmieści się on w całości. Zwróć uwagę, że ta opcja jest dostępna tylko wtedy, gdy hAxis.textPosition ma wartość „out” (czyli wartość domyślną). Domyślna wartość dla dat i godzin to false.

Typ: wartość logiczna
Domyślne:automatyczne
hAxis.slantedTextAngle

Kąt tekstu na osi poziomej (jeśli jest on skośny). Ignorowana, jeśli właściwość hAxis.slantedText ma wartość false lub jest w trybie automatycznym, a na wykresie ustawiono rysowanie tekstu w poziomie. Jeśli kąt jest dodatni, obrót jest w lewo, a jeśli ujemny – w kierunku zgodnym z ruchem wskazówek zegara.

Typ: liczba, -90–90
Wartość domyślna: 30
hAxis.maxAlternation

Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstowe osi staną się zbyt zatłoczone, serwer może przesuwać sąsiednie etykiety w górę lub w dół, aby je lepiej dopasować. Ta wartość określa największą liczbę używanych poziomów. Serwer może użyć mniejszej liczby poziomów, jeśli etykiety mieszczą się bez nakładania się. Domyślna wartość dla dat i godzin to 1.

Typ: liczba
Wartość domyślna: 2
hAxis.maxTextLines

Maksymalna dozwolona liczba wierszy w etykietach tekstowych. Etykiety mogą obejmować wiele wierszy, jeśli są za długie, a liczba wierszy jest domyślnie ograniczona wysokością dostępnego miejsca.

Typ: liczba
Domyślnie automatycznie
hAxis.minTextSpacing

Minimalne odstępy w poziomie (w pikselach) dopuszczalne między 2 przyległymi etykietami tekstowymi. Jeśli etykiety są rozmieszczone zbyt gęsto lub zbyt długie, odstępy mogą spaść poniżej tego progu i w takim przypadku zostanie zastosowany jeden z mechanizmów ułatwiających zachowanie poufności etykiet (na przykład obcięcie etykiet lub usunięcie niektórych z nich).

Typ: liczba
Domyślna: wartość hAxis.textStyle.fontSize.
hAxis.showTextEvery

Liczba etykiet osi poziomej do pokazania, gdzie 1 oznacza każdą etykietę, 2 oznacza, że są widoczne wszystkie pozostałe etykiety itd. Domyślnie wyświetlane jest jak najwięcej etykiet bez nakładania się etykiet.

Typ: liczba
Domyślne:automatyczne
hAxis.viewWindowMode

Określa, jak skalować oś poziomą, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:

  • „pretty” – przeskaluj wartości w poziomie tak, aby maksymalne i minimalne wartości danych były renderowane trochę wewnątrz lewej i prawej strony obszaru wykresu. W przypadku liczb w oknie viewWindow znajduje się najbliższa większa linia siatki lub najbliższą pomocniczą siatkę dla dat i godzin.
  • „zmaksymalizowane” – przeskaluj wartości w poziomie tak, aby maksymalna i minimalna wartość danych dotykały lewej i prawej strony obszaru wykresu. Spowoduje to zignorowanie pól haxis.viewWindow.min i haxis.viewWindow.max.
  • „explicit” – wycofana opcja służąca do określania wartości lewej i prawej skali obszaru wykresu. (Wycofano, ponieważ jest nadmiarowy w przypadku atrybutów haxis.viewWindow.min i haxis.viewWindow.max.) Wartości danych spoza tych wartości zostaną przycięte. Musisz określić obiekt hAxis.viewWindow opisujący maksymalne i minimalne wartości do wyświetlenia.
Typ: ciąg znaków
Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają haxis.viewWindow.min i haxis.viewWindow.max.
hAxis.viewWindow

Określa zakres przycięcia osi poziomej.

Typ: obiekt
Wartość domyślna:null
hAxis.viewWindow.max

Indeks wiersza liczony od zera, na którym kończy się okno przycinania. Punkty danych w tym indeksie i wyższych, zostaną przycięte. W połączeniu z funkcją vAxis.viewWindowMode.min definiuje półotwarty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Inaczej mówiąc, będzie wyświetlany każdy indeks min <= index < max.

Ignorowana, gdy atrybut hAxis.viewWindowMode ma wartość „ładny” lub „zmaksymalizowany”.

Typ: liczba
Domyślnie automatycznie
hAxis.viewWindow.min

Indeks wiersza liczony od zera, od którego zaczyna się okno przycinania. Punkty danych w indeksach niższych niż ten zostaną przycięte. W połączeniu z funkcją vAxis.viewWindowMode.max definiuje półotwarty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Inaczej mówiąc, będzie wyświetlany każdy indeks równy min <= index < max.

Ignorowana, gdy atrybut hAxis.viewWindowMode ma wartość „ładny” lub „zmaksymalizowany”.

Typ: liczba
Domyślnie automatycznie
histogram.bucketSize

Zakoduj na stałe rozmiar każdego słupka histogramu, zamiast zezwalać na jego określanie przez algorytm.

Typ: liczba
Domyślnie automatycznie
histogram.hideBucketItems

Pomiń cienkie podziały między blokami histogramu, tworząc serię słupków pełnych.

Typ: wartość logiczna
Wartość domyślna: fałsz.
histogram.lastBucketPercentile

Podczas obliczania rozmiaru zasobnika histogramu zignoruj górną i dolną wartość lastBucketPercentile procent. Wartości są nadal uwzględniane w histogramie, ale nie mają wpływu na zasobniki.

Typ: liczba
Wartość domyślna: 0
histogram.minValue

Rozszerz zakres zasobników, aby uwzględnić tę wartość.

Typ: liczba
Domyślnie: automatycznie – użyj min. danych
histogram.maxValue

Rozszerz zakres zasobników, aby uwzględnić tę wartość.

Typ: liczba
Domyślne: automatycznie – użyj maks. wartości danych
histogram.numBucketsRule

Jak obliczyć domyślną liczbę zasobników. Możliwe wartości to:

  • 'sqrt' – oblicza pierwiastek kwadratowy z liczby punktów danych.
  • 'sturges' – pochodzą z rozkładu dwumianowego. Zakładamy, że rozkład jest w przybliżeniu normalny.
  • 'rice' – prostsza alternatywa dla reguły Sturgesa.
Więcej informacji znajdziesz na stronie Wikipedia – Histogram: liczba pojemników i szerokość.

Typ: ciąg znaków
Wartość domyślna:'sqrt'
wysokość

Wysokość wykresu w pikselach.

Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
interpolateNulls

Określa, czy odgadnąć wartość brakujących punktów. Jeśli ma wartość true (prawda), odgadnie wartość wszystkich brakujących danych na podstawie sąsiednich punktów. Jeśli ma wartość Fałsz, spowoduje to pozostawienie przerwy w wierszu w nieznanym punkcie.

Ta metoda nie jest obsługiwana w przypadku wykresów warstwowych z opcją isStacked: true/'percent'/'relative'/'absolute'.

Typ: wartość logiczna
Wartość domyślna: fałsz.
isStacked

Jeśli ma wartość Prawda, umieszcza elementy wszystkich serii przy każdej wartości domeny. Uwaga: na wykresach kolumnowych, obszarowych i SteppedArea Wykresy Google odwracają kolejność elementów legendy, by lepiej pasowały do ułożenia elementów serii (np. seria 0 będzie skrajnie skrajnie legendą). To nie dotyczy wykresów słupkowych.

Opcja isStacked obsługuje też 100% stosów, w ramach których stos elementów przy poszczególnych wartościach domeny jest przeskalowywany w taki sposób, by sumować się do 100%.

Opcje isStacked to:

  • false – elementy nie będą się nakładać. Jest to opcja domyślna.
  • true – gromadzi elementy wszystkich serii przy każdej wartości domeny.
  • 'percent' – skumuluje elementy wszystkich serii przy każdej wartości domeny i przeskaluje je tak, by sumowały się do 100%. Wartość każdego elementu jest obliczana jako procent 100%.
  • 'relative' – skumuluje elementy wszystkich serii przy każdej wartości domeny i przeskalowuje je w taki sposób, by uzyskać sumę 1. Wartość każdego elementu jest obliczana jako ułamek 1.
  • 'absolute' – działa tak samo jak isStacked: true.

Przy 100% stosów obliczona wartość każdego elementu pojawi się na etykietce po jego rzeczywistej wartości.

Na osi docelowej domyślnie pojawią się wartości zaznaczenia na podstawie względnej skali 0–1 jako ułamków 1 dla 'relative' i od 0 do 100% dla 'percent' (Uwaga: jeśli korzystasz z opcji 'percent', wartości osi i znaczników są wyświetlane jako wartości procentowe, jednak rzeczywiste wartości są względnymi wartościami ze skali 0–1. Dzieje się tak, ponieważ skoki na osi procentowej są wynikiem zastosowania formatu „#.##%” do względnych wartości skali od 0 do 1. Jeśli używasz isStacked: 'percent', pamiętaj, by znaczniki lub linie siatki określać za pomocą względnych wartości skali od 0 do 1. Możesz dostosować wartości linii siatki i znaczniki oraz formatowanie za pomocą odpowiednich opcji hAxis/vAxis.

Grupowanie 100% obsługuje tylko wartości danych typu number. Wartość bazowa musi wynosić 0.

Typ: wartość logiczna/ciąg
Wartość domyślna: fałsz.
legenda

Obiekt z członkami służącymi do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Typ: obiekt
Wartość domyślna:null
legend.alignment

Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:

  • „start” – wyrównane do początku obszaru przydzielonego do legendy.
  • „center” (centrum) – wyśrodkowany w obszarze przydzielonego dla legendy.
  • „end” – wyrównane do końca obszaru przydzielonego do legendy.

Początek, środek i koniec odnoszą się do stylu (pionowego lub poziomego) legendy. Na przykład w legendzie „po prawej” punkty „początek” i „koniec” znajdują się odpowiednio na górze i na dole. W legendzie „góra” wartości „początek” i „koniec” znajdują się odpowiednio po lewej i prawej stronie obszaru.

Wartość domyślna zależy od pozycji legendy. Domyślna wartość w legendach „bottom” to „center”, a w innych – „start”.

Typ: ciąg znaków
Domyślne:automatyczne
legend.maxLines

Maksymalna liczba wierszy w legendzie. Aby dodać wiersze do legendy, ustaw wartość większą niż 1. Uwaga: dokładna logika używana do określenia rzeczywistej liczby wyrenderowanych wierszy wciąż się zmienia.

Obecnie ta opcja działa tylko wtedy, gdy pole legend.position ma wartość „top”.

Typ: liczba
Wartość domyślna: 1
legend.pageIndex

Początkowo wybrany indeks stron legendy liczony od zera.

Typ: liczba
Wartość domyślna: 0
legend.position

Pozycja legendy. Użyj jednego z tych rodzajów wartości:

  • „bottom” – pod wykresem.
  • „po lewej” – po lewej stronie wykresu nie jest powiązana żadna seria. Jeśli chcesz, by legenda znajdowała się po lewej stronie, użyj opcji targetAxisIndex: 1.
  • „w” – wewnątrz wykresu w lewym górnym rogu wykresu.
  • „brak” – nie jest wyświetlana żadna legenda.
  • „w prawo” – z prawej strony wykresu. Niezgodne z opcją vAxes.
  • „góra” – nad wykresem.
Typ: ciąg znaków
Domyślnie: „right”
legend.textStyle

Obiekt określający styl tekstu legendy. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
orientacja

Orientacja wykresu. Ustawienie wartości 'vertical' powoduje obracanie osie wykresu w taki sposób, że wykres kolumnowy (np.) zmienia się w wykres słupkowy, a wykres warstwowy rozwija się w prawo zamiast w górę:

Typ: ciąg znaków
Domyślnie: „poziomo”
reverseCategories

Jeśli zasada ma wartość Prawda, seria jest rysowana od prawej do lewej. Domyślnie rysowanie od lewej do prawej.

Typ: wartość logiczna
Wartość domyślna: fałsz.
seria

Tablica obiektów, z których każdy opisuje format odpowiedniej serii na wykresie. Aby użyć wartości domyślnych dla serii, podaj pusty obiekt {}. Jeśli nie określono serii lub wartości, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:

  • color – kolor, który będzie używany w tej serii. Podaj prawidłowy ciąg znaków HTML koloru.
  • labelInLegend – opis serii, który pojawi się w legendzie wykresu.
  • targetAxisIndex – do której osi chcesz przypisać tę serię, gdzie 0 to oś domyślna, a 1 – oś przeciwna. Wartość domyślna to 0. Wartość 1 określa wykres, na którym różne serie są renderowane na różnych osiach. Do osi domyślnej zostanie przydzielona co najmniej 1 seria. Możesz zdefiniować inną skalę dla różnych osi.
  • visibleInLegend – wartość logiczna, gdzie „true” oznacza, że seria powinna mieć pozycję legendy, a fałsz, że nie powinna. Wartość domyślna to true (prawda).

Możesz podać tablicę obiektów, z których każdy odnosi się do serii w podanej kolejności, albo określić obiekt, w którym każdy element podrzędny ma klucz numeryczny wskazujący, do której serii ma zastosowanie. Na przykład dwie poniższe deklaracje są identyczne. Pierwsza seria jest zadeklarowana jako czarna i nie ma jej w legendzie, a czwarta – jako czerwona i nie ma jej w legendzie:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Wartość domyślna: {}
motyw

Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współpracują ze sobą, aby uzyskać określony sposób działania wykresu lub efektu wizualnego. Obecnie dostępny jest tylko 1 motyw:

  • „zmaksymalizowany” – maksymalizuje obszar wykresu oraz rysuje legendę i wszystkie etykiety wewnątrz obszaru wykresu. Ustawia te opcje:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
Typ: ciąg znaków
Wartość domyślna:null
tytuł

Tekst do wyświetlenia nad wykresem.

Typ: ciąg znaków
Domyślnie bez tytułu.
titlePosition

Gdzie umieścić tytuł wykresu w porównaniu do obszaru wykresu. Obsługiwane wartości:

  • w – narysuj tytuł w obszarze wykresu.
  • na zewnątrz – narysuj tytuł poza obszarem wykresu.
  • none – pomija tytuł.
Typ: ciąg znaków
Domyślnie: „out”
titleTextStyle

Obiekt, który określa styl tekstu tytułu. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
etykietka

Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Typ: obiekt
Wartość domyślna:null
tooltip.isHtml

Jeśli ma wartość Prawda, używaj etykietek renderowanych HTML (a nie renderowanych w formacie SVG). Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki.

Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki.

Typ: wartość logiczna
Wartość domyślna: fałsz.
tooltip.showColorCode

Jeśli ma wartość prawda, obok informacji o serii na etykietce wyświetlaj kolorowe kwadraty. Wartość domyślna to true, gdy focusTarget ma wartość „category”. W przeciwnym razie wartość domyślna to false (fałsz).

Typ: wartość logiczna
Domyślne:automatyczne
tooltip.textStyle

Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Interakcja użytkownika, która powoduje wyświetlenie etykietki:

  • „fokus” – etykietka jest wyświetlana po najechaniu przez użytkownika kursorem na element.
  • „none” (brak) – etykietka nie będzie wyświetlana.
Typ: ciąg znaków
Domyślnie: „fokus”
vAxes

Określa właściwości poszczególnych osi pionowych, jeśli wykres ma wiele osi pionowych. Każdy obiekt podrzędny jest obiektem vAxis i może zawierać wszystkie właściwości obsługiwane przez funkcję vAxis. Te wartości właściwości zastępują wszystkie ustawienia globalne danej usługi.

Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą funkcji series.targetAxisIndex, a potem skonfiguruj ją za pomocą funkcji vAxes. Ten przykład przypisze serię 2 do prawej osi i określa niestandardowy tytuł i styl tekstu:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Ta właściwość może być obiektem lub tablicą. Obiekt to zbiór obiektów, z których każda ma etykietę liczbową określającą definiowaną oś – jest to format pokazany powyżej. Tablica to tablica obiektów, po jednym na oś. Na przykład ten zapis formatu tablicy jest identyczny z pokazanym powyżej obiektem vAxis:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Typ: tablica obiektów lub obiektów podrzędnych
Wartość domyślna:null
vAxis

Obiekt ze elementami służącymi do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Typ: obiekt
Wartość domyślna:null
vAxis.baseline

Właściwość vAxis, która określa punkt odniesienia dla osi pionowej. Jeśli punkt odniesienia jest większy niż najwyższa linia siatki lub mniejsza niż najniższa linia siatki, zostanie zaokrąglona do najbliższej linii siatki.

Typ: liczba
Domyślne:automatyczne
vAxis.baselineColor

Określa kolor punktu odniesienia na osi pionowej. Może to być dowolny ciąg znaków HTML koloru, na przykład 'red' lub '#00cc00'.

Typ: liczba
Domyślny: „black”
vAxis.direction

Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się na dole wykresu. Określ -1, aby odwrócić kolejność wartości.

Typ: 1 lub -1
Wartość domyślna: 1
vAxis.format

Ciąg formatowania etykiet osi liczbowej. To jest podzbiór zestawu wzorców OIOM . Na przykład {format:'#,###%'} wyświetli wartości „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5. Możesz też przesłać:

  • {format: 'none'}: wyświetla liczby bez formatowania (np. 8000000)
  • {format: 'decimal'}: wyświetla liczby z separatorami tysięcy (np. 8 000 000)
  • {format: 'scientific'}: wyświetla liczby w zapisie naukowym (np. 8E6).
  • {format: 'currency'}: wyświetla liczby w walucie lokalnej (np. 8 000 000,00)
  • {format: 'percent'}: wyświetla liczby jako wartości procentowe (np. 800 000 000%)
  • {format: 'short'}: wyświetla skrócone liczby (np. 8 mln)
  • {format: 'long'}: wyświetla liczby w postaci pełnych wyrazów (np. 8 mln)

Faktyczne formatowanie zastosowane do etykiety jest pobierane z języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku .

Przy obliczaniu wartości znaczników i linii siatki branych jest pod uwagę kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii siatki, a te alternatywne zostaną odrzucone, jeśli sformatowane etykiety znacznika będą się powtarzać lub się nakładać. Możesz więc określić format:"#", jeśli chcesz wyświetlać tylko wartości liczb całkowitych, ale pamiętaj, że jeśli żadna alternatywa nie spełnia tego warunku, nie będą wyświetlane żadne linie siatki ani znaczniki.

Typ: ciąg znaków
Domyślnie automatycznie
vAxis.gridlines

Obiekt ze elementami służącymi do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki na osi pionowej są rysowane poziomo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

{color: '#333', minSpacing: 20}
Typ: obiekt
Wartość domyślna:null
vAxis.gridlines.color

Kolor pionowych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślnie: „#CCC”.
vAxis.gridlines.count

Przybliżona liczba poziomych linii siatki w obszarze wykresu. Jeśli podasz liczbę dodatnią dla elementu gridlines.count, zostanie ona użyta do obliczenia wartości minSpacing między liniami siatki. Możesz podać wartość 1, by narysować tylko jedną linię siatki, lub wartość 0, by nie rysować linii siatki. Aby automatycznie obliczać liczbę linii siatki na podstawie innych opcji, podaj wartość domyślną –1.

Typ: liczba
Wartość domyślna: -1
vAxis.gridlines.interval

Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji gridlines.units.<unit>.interval, które są używane tylko dla dat i godzin. W przypadku skal liniowych wartość domyślna to [1, 2, 2.5, 5], co oznacza, że wartości linii siatki mogą występować w każdej jednostce (1), w jednostkach parzystych (2) lub wielokrotnościach 2,5 lub 5. Uwzględniana jest też dowolna potęga 10-krotności tych wartości (np. [10, 20, 25, 50] i [,1, 0,2, 0,25, 0,5]). W przypadku skal logicznych wartość domyślna to [1, 2, 5].

Typ: liczba od 1 do 10 (bez 10).
Wartość domyślna: obliczone.
vAxis.gridlines.minSpacing

Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx. Wartość domyślna głównych linii siatki to 40 dla skal liniowych i 20 dla skal logicznych. Jeśli podasz count, a nie minSpacing, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast określisz właściwość minSpacing, a nie count, liczba zostanie obliczona na podstawie parametru minSpacing. Jeśli podasz obie te wartości, minSpacing zastąpi.

Typ: liczba
Wartość domyślna: obliczone.
vAxis.gridlines.multiple

Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana. Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość gridlines.multiple = 1, lub wymuszaniem, aby były wielokrotnościami liczby 1000, podając wartość gridlines.multiple = 1000.

Typ: liczba
Wartość domyślna: 1
vAxis.gridlines.units

Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund.

Ogólny format to:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Więcej informacji znajdziesz w sekcji Daty i godziny.

Typ: obiekt
Wartość domyślna:null
vAxis.minorGridlines

Obiekt z elementami umożliwiającymi konfigurowanie podrzędnych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines.

Typ: obiekt
Wartość domyślna:null
vAxis.minorGridlines.color

Kolor pionowych podrzędnych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru.

Typ: ciąg znaków
Domyślny: połączenie koloru linii siatki i koloru tła.
vAxis.minorGridlines.count

Opcja MinGridlines.count jest obecnie głównie wycofywana. Wyjątkiem jest wyłączanie podrzędnych linii siatki przez ustawienie wartości licznika na 0. Liczba mniejszych linii siatki zależy od odstępu między głównymi liniami siatki (patrz: vAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (patrz vAxis.minorGridlines.minSpacing).

Typ: liczba
Wartość domyślna: 1
vAxis.minorGridlines.interval

Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki. Domyślny interwał dla skal liniowych to [1, 1.5, 2, 2.5, 5], a dla skal logicznych to [1, 2, 5].

Typ: liczba
Wartość domyślna: 1
vAxis.minorGridlines.minSpacing

Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych.

Typ: liczba
Default (wartość domyślna): obliczone
vAxis.minorGridlines.multiple

Tak samo jak w przypadku głównych gridlines.multiple.

Typ: liczba
Wartość domyślna: 1
vAxis.minorGridlines.units

Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund.

Ogólny format to:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Więcej informacji znajdziesz w sekcji Daty i godziny.

Typ: obiekt
Wartość domyślna:null
vAxis.logScale

Jeśli ma wartość prawda, oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie.

Typ: wartość logiczna
Wartość domyślna: fałsz.
vAxis.scaleType

Właściwość vAxis, dzięki której oś pionowa jest skalą logarytmiczną. Użyj jednego z tych rodzajów wartości:

  • null – skalowanie logarytmiczne nie jest wykonywane.
  • „log” – skalowanie logarytmiczne. Wartości ujemne i zerowe nie są przedstawiane na wykresie. Ta opcja jest taka sama jak ustawienie vAxis: { logscale: true }.
  • „mirrorLog” – skalowanie logarytmiczne, w którym wyświetlane są wartości ujemne i zerowe. Narysowana wartość liczby ujemnej to ujemny log wartości bezwzględnej. Wartości bliskie 0 są naniesione na skalę liniową.
Typ: ciąg znaków
Wartość domyślna:null
vAxis.textPosition

Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”.

Typ: ciąg znaków
Domyślnie: „out”
vAxis.textStyle

Obiekt określający styl tekstu osi pionowej. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Zastępuje automatycznie wygenerowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość v dla wartości znacznika i opcjonalną właściwość f zawierającą ciąg literału, który będzie wyświetlany jako etykieta.

Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz viewWindow.min lub viewWindow.max do zastąpienia.

Przykłady:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Typ: tablica elementów.
Domyślnie automatycznie
vAxis.title

Właściwość vAxis, która określa tytuł osi pionowej.

Typ: ciąg znaków
Domyślnie bez tytułu.
vAxis.titleTextStyle

Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma ten format:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Przenosi maksymalną wartość osi pionowej do określonej wartości. Na większości wykresów wartość ta będzie wyższa. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość „y” danych. vAxis.viewWindow.max zastępuje tę właściwość.

Typ: liczba
Domyślne:automatyczne
vAxis.minValue

Przenosi minimalną wartość osi pionowej do określonej wartości. Na większości wykresów będzie to zmiana w dół. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość y danych. vAxis.viewWindow.min zastępuje tę właściwość.

Typ: liczba
Wartość domyślna:null
vAxis.viewWindowMode

Określa, jak skalować oś pionową, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:

  • „pretty” – przeskaluj wartości pionowe tak, by maksymalne i minimalne wartości danych były renderowane trochę wewnątrz i na górze obszaru wykresu. W przypadku liczb w oknie viewWindow znajduje się najbliższa większa linia siatki lub najbliższą pomocniczą siatkę dla dat i godzin.
  • „zmaksymalizowane” – przeskaluj wartości pionowe, tak aby maksymalna i minimalna wartość danych dotykały górnej i dolnej części obszaru wykresu. Spowoduje to zignorowanie pól vaxis.viewWindow.min i vaxis.viewWindow.max.
  • „explicit” – wycofana opcja służąca do określania górnej i dolnej skali obszaru wykresu. (Wycofano, ponieważ jest nadmiarowy w atrybutach vaxis.viewWindow.min i vaxis.viewWindow.max. Wartości danych spoza tych wartości zostaną przycięte. Musisz określić obiekt vAxis.viewWindow opisujący maksymalne i minimalne wartości do wyświetlenia.
Typ: ciąg znaków
Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają vaxis.viewWindow.min i vaxis.viewWindow.max.
vAxis.viewWindow

Określa zakres przycięcia osi pionowej.

Typ: obiekt
Wartość domyślna:null
vAxis.viewWindow.max

Maksymalna wartość danych pionowych do renderowania.

Ignorowana, gdy atrybut vAxis.viewWindowMode ma wartość „ładny” lub „zmaksymalizowany”.

Typ: liczba
Domyślnie automatycznie
vAxis.viewWindow.min

Minimalna wartość danych pionowych do renderowania.

Ignorowana, gdy atrybut vAxis.viewWindowMode ma wartość „ładny” lub „zmaksymalizowany”.

Typ: liczba
Domyślnie automatycznie
szerokość

Szerokość wykresu w pikselach.

Typ: liczba
Domyślna: szerokość elementu nadrzędnego.

Metody

Metoda
draw(data, options)

Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia ready. Extended description.

Return Type: brak
getAction(actionID)

Zwraca obiekt działania etykietki z żądanym obiektem actionID.

Return Type: (Typ zwracania): obiekt
getBoundingBox(id)

Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu id. Format zapisu id nie jest jeszcze udokumentowany (są to wartości zwracane przez moduły obsługi zdarzeń), ale oto kilka przykładów:

var cli = chart.getChartLayoutInterface();

Wysokość obszaru wykresu
cli.getBoundingBox('chartarea').height
Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego
cli.getBoundingBox('bar#0#2').width
Ramka ograniczająca piątej podkładki na wykresie kołowym
cli.getBoundingBox('slice#4')
Ramka ograniczająca dane wykresu pionowego (np. kolumnowego):
cli.getBoundingBox('vAxis#0#gridline')
Ramka ograniczająca dane wykresu poziomego (np. słupkowego):
cli.getBoundingBox('hAxis#0#gridline')

Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwracania): obiekt
getChartAreaBoundingBox()

Zwraca obiekt zawierający lewo, górę, szerokość i wysokość zawartości wykresu (tj. bez etykiet i legendy):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwracania): obiekt
getChartLayoutInterface()

Zwraca obiekt zawierający informacje o pozycji na ekranie wykresu i jego elementów.

W przypadku zwróconego obiektu można wywołać te metody:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwracania): obiekt
getHAxisValue(xPosition, optional_axis_index)

Zwraca poziomą wartość danych w punkcie xPosition, czyli odsunięcie od lewej krawędzi kontenera wykresu w pikselach. Może być ujemna.

Przykład: chart.getChartLayoutInterface().getHAxisValue(400).

Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwrotu): liczba
getImageURI()

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Zobacz Drukowanie wykresów PNG.

Return Type: (Typ zwracania): ciąg znaków
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Na tym wykresie w danym momencie można wybrać tylko 1 element. Extended description

Return Type: tablica elementów zaznaczenia.
getVAxisValue(yPosition, optional_axis_index)

Zwraca pionową wartość danych przy yPosition, czyli przesunięcie w pikselach od górnej krawędzi kontenera wykresu. Może być ujemna.

Przykład: chart.getChartLayoutInterface().getVAxisValue(300).

Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwrotu): liczba
getXLocation(dataValue, optional_axis_index)

Zwraca współrzędną X piksela dla elementu dataValue względem lewej krawędzi kontenera wykresu.

Przykład: chart.getChartLayoutInterface().getXLocation(400).

Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwrotu): liczba
getYLocation(dataValue, optional_axis_index)

Zwraca współrzędną Y piksela (dataValue) względem górnej krawędzi kontenera wykresu.

Przykład: chart.getChartLayoutInterface().getYLocation(300).

Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwrotu): liczba
removeAction(actionID)

Usuwa z wykresu działanie etykietki z żądanym elementem actionID.

Typ zwrotu: none
setAction(action)

Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika.

Metoda setAction przyjmuje obiekt jako parametr działania. Ten obiekt powinien określać 3 właściwości: id – identyfikator ustawianego działania, text – tekst, który powinien być widoczny w etykietce działania, oraz action – funkcję, która powinna zostać uruchomiona po kliknięciu tekstu działania przez użytkownika.

Przed wywołaniem metody draw() wykresu należy ustawić wszystkie działania związane z etykietką. Rozszerzony opis

Typ zwrotu: none
setSelection()

Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Na tym wykresie można wybrać tylko 1 element naraz. Extended description

Return Type: brak
clearChart()

Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby.

Return Type: brak

Zdarzenia

Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowa interaktywność, Obsługa zdarzeń i Uruchamianie zdarzeń.

Nazwa
animationfinish

Uruchamiane po zakończeniu animacji przejścia.

Właściwości: brak
click

Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

Właściwości: targetID
error

Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd.

Właściwości: identyfikator, komunikat
legendpagination

Uruchamiane, gdy użytkownik kliknie strzałki podziału na strony w legendzie. Zwraca bieżący indeks stron legendy liczony od zera oraz łączną liczbę stron.

Właściwości: currentPageIndex, totalPages
onmouseover

Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null).

Właściwości: wiersz, kolumna
onmouseout

Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Słupek odpowiada komórce w tabeli danych, wpisowi legendy o kolumnie (indeks wiersza ma wartość null), a kategorię – wierszowi (indeks kolumny ma wartość null).

Właściwości: wiersz, kolumna
ready

Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody draw i wywołaj je dopiero po wywołaniu zdarzenia.

Właściwości: brak
select

Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection().

Właściwości: brak

Zasady dotyczące danych

Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.