Wizualizacja: wykres bąbelkowy

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

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.

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.

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.

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.

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

Szerokość obramowania w pikselach.

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

Obiekt z członkami umożliwiającymi skonfigurowanie wizualnych właściwości dymków.

Przezroczystość bąbelków, gdzie 0 oznacza pełną przezroczystość, a 1 – pełną nieprzezroczystość.

Kolor kreski bąbelków.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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%'}

• 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).

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

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

Szerokość obszaru wykresu.

Wysokość obszaru wykresu.

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'].

Obiekt, który określa mapowanie między wartościami i kolorami w kolumnie koloru lub skalę gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Jeśli ta opcja jest dostępna, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej i niższych wartościach będą renderowane jako pierwszy kolor w zakresie colorAxis.colors.

Jeśli ta opcja jest dostępna, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej i wyższych wartościach będą renderowane jako ostatni kolor w zakresie colorAxis.colors.

Jeśli ta opcja jest dostępna, określa sposób powiązania wartości z kolorami. Każda wartość jest powiązana z odpowiednim kolorem w tablicy colorAxis.colors. Wartości te mają zastosowanie do danych o kolorach na wykresie. Kolorowanie odbywa się zgodnie z gradientem wartości określonych w tym miejscu. Niepodanie wartości w przypadku tej opcji jest równoważne z podanie wartości [minValue, maxValue].

Kolory do przypisania do wartości w wizualizacji. Tablica ciągów tekstowych, w których każdy element jest ciągiem znaków koloru HTML, np. colorAxis: {colors:['red','#004411']}. Musisz mieć co najmniej 2 wartości. Gradient będzie obejmować wszystkie wartości oraz obliczone wartości pośrednie, przy czym pierwszy kolor ma najmniejszą wartość, a ostatni – najwyższą.

Obiekt określający styl legendy koloru gradientu.

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

• „góra” – nad wykresem.
• „bottom” – pod wykresem.
• „w” – wewnątrz wykresu, u góry.
• „brak” – nie jest wyświetlana żadna legenda.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

Ciąg formatu etykiet liczbowych. To jest podzbiór zestawu wzorców OIOM . Na przykład {numberFormat:'.##'} wyświetli wartości „10,66”, „10,6” i „10,0” dla wartości 10,666, 10,6 i 10.

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.

Opcja explorer umożliwia użytkownikom przesuwanie i powiększanie wykresów Google. explorer: {} działa domyślnie eksploratora, co umożliwia użytkownikom przesuwanie w poziomie i w pionie przez przeciąganie, a także powiększanie i pomniejszanie przez przewijanie.

Ta funkcja jest eksperymentalna i może się zmienić w kolejnych wersjach.

Uwaga: eksplorator działa tylko z ciągłymi osiami (takimi jak liczby lub daty).

Eksplorator wykresów Google obsługuje 3 działania:

• dragToPan: przeciągnij, aby przesunąć wykres w pionie i poziomie. Aby przesuwać widok tylko wzdłuż osi poziomej, użyj explorer: { axis: 'horizontal' }. Podobnie jest w przypadku osi pionowej.
• dragToZoom: domyślnym działaniem eksploratora jest powiększanie i pomniejszanie, gdy użytkownik przewija stronę. Jeśli używana jest opcja explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, przeciąganie prostokątnego obszaru powoduje jego powiększenie. Zalecamy użycie rightClickToReset zawsze wtedy, gdy jest używany dragToZoom. Informacje o tym, jak dostosować powiększenie, znajdziesz w explorer.maxZoomIn, explorer.maxZoomOut i explorer.zoomDelta.
• rightClickToReset: kliknięcie wykresu prawym przyciskiem myszy powoduje powrót do pierwotnego poziomu przesunięcia i powiększenia.

Domyślnie użytkownicy mogą przesuwać widok w poziomie i w pionie, gdy używana jest opcja explorer. Jeśli chcesz, aby użytkownicy mogli przesuwać widok tylko w poziomie, użyj właściwości explorer: { axis: 'horizontal' }. Podobnie explorer: { axis: 'vertical' } umożliwia przesuwanie tylko w pionie.

Domyślnie użytkownicy mogą przesuwać widok dookoła, niezależnie od tego, gdzie znajdują się dane. Aby mieć pewność, że użytkownicy nie będą przesuwali poza oryginalny wykres, użyj funkcji explorer: { keepInBounds: true }.

Wartość maksymalna, którą odkrywca może powiększyć. Domyślnie użytkownicy mogą powiększyć widok na tyle, że zobaczą tylko 25% oryginalnego widoku. Ustawienie explorer: { maxZoomIn: .5 } umożliwi użytkownikom powiększenie na tyle duże, aby można było zobaczyć połowę pierwotnego widoku.

Wartość maksymalna, którą odkrywca może pomniejszyć. Domyślnie użytkownicy mogą pomniejszyć widok na tyle, że wykres zajmował tylko 1/4 dostępnego miejsca. Ustawienie explorer: { maxZoomOut: 8 } umożliwi użytkownikom takie powiększenie, że wykres zajmowałby tylko 1/8 dostępnego miejsca.

Gdy użytkownik powiększa lub pomniejsza widok, explorer.zoomDelta określa stopień powiększenia. Im mniejsza liczba, tym płynniejsze i wolniejsze powiększenie.

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.

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.

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

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

Punkt odniesienia na osi poziomej.

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

Kierunek, w którym rosną wartości na osi poziomej. Określ -1, aby odwrócić kolejność wartości.

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.

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}

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

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.

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.

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

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

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

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.

Właściwość hAxis, dzięki której oś pozioma jest skalą logarytmiczną (wszystkie wartości muszą być dodatnie). Ustaw wartość „true” (prawda) w przypadku opcji „yes” (tak).

Właściwość hAxis, dzięki której oś pozioma 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 hAxis: { 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ą.

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

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.

Zastępuje automatycznie wygenerowane znaczniki osi X 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:

• hAxis: { ticks: [5,10,15,20] }
• hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
• hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
• hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

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

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.

Przenosi maksymalną wartość osi poziomej do określonej wartości. Na większości wykresów będzie to zmiana w prawo. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość x danych. hAxis.viewWindow.max zastępuje tę właściwość.

Przenosi wartość minimalną na osi poziomej do określonej wartości. Na większości wykresów będzie ona ustawiona w lewo. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość x danych. hAxis.viewWindow.min zastępuje tę właściwość.

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.

Określa zakres przycięcia osi poziomej.

Maksymalna wartość danych poziomych do renderowania.

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

Minimalna wartość danych poziomych do renderowania.

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

Wysokość wykresu w pikselach.

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

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

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

Początkowo wybrany indeks stron legendy liczony od zera.

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.

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.

Gdy selectionMode ma wartość 'multiple', użytkownicy mogą wybrać wiele punktów danych.

Obiekt obiektów, którego klucze to nazwy serii (wartości w kolumnie Kolor) i każdy obiekt opisujący format odpowiedniej serii na wykresie. Jeśli nie podasz 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.
• visibleInLegend – wartość logiczna, gdzie „true” oznacza, że seria powinna mieć pozycję legendy, a fałsz, że nie powinna. Wartość domyślna to true (prawda).

series: {'Europe': {color: 'green'}}

Obiekt z członkami służącymi do konfigurowania sposobu, w jaki wartości są powiązane z rozmiarem dymka. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób:

 {minValue: 0,  maxSize: 20}

Maksymalny promień największego możliwego bąbelka (w pikselach).

Wartość rozmiaru (tak jak w danych na wykresie) do zmapowania na sizeAxis.maxSize. Większe wartości zostaną przycięte do tej wartości.

Minimalny promień najmniejszego możliwego bąbelka (w pikselach).

Wartość rozmiaru (tak jak w danych na wykresie) do zmapowania na sizeAxis.minSize. Mniejsze wartości zostaną przycięte do tej wartości.

Jeśli ma wartość true (prawda), sortuje bąbelki według rozmiaru w taki sposób, aby nad większymi bąbelkami pojawiały się mniejsze bąbelki. Jeśli ma wartość fałsz, dymki są sortowane zgodnie ze swoją kolejnością w tabeli danych.

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

Tekst do wyświetlenia nad wykresem.

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

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.

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}

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.

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.

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.
• „wybór” – etykietka zostanie wyświetlona, gdy użytkownik wybierze element.

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

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.

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

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.

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.

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}

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

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.

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.

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

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

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

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.

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

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

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

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.

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

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

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.

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

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

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.

Określa zakres przycięcia osi pionowej.

Maksymalna wartość danych pionowych do renderowania.

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

Minimalna wartość danych pionowych do renderowania.

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

Szerokość wykresu w pikselach.

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

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

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.

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.

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.

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.

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Zobacz Drukowanie wykresów PNG.

Zwraca tablicę wybranych elementów wykresu. Elementy do wyboru to dymki. Na tym wykresie w danym momencie można wybrać tylko 1 element. Extended description

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.

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.

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.

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

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

Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy do wyboru to dymki. Na tym wykresie można wybrać tylko 1 element naraz. Extended description

Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby.

Uruchamiane po zakończeniu animacji przejścia.

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

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

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.

Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Dymek odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null).

Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Dymek odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null).

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.

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