Wizualizacja: wykres bąbelkowy

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

Funkcja wygładzania zastosowana w animacji. Dostępne są te opcje:

• „linear” – stała szybkość.
• „in” – Łatwość – Zacznij powoli i przyspieszaj.
• „out” – zwolnij – uruchamiaj szybko i zwolnij.
• „inAndOut” – Łatwe włączanie i wyłączanie – zacznij spowalniać, przyspieszać i zwalniać.

Określa, czy wykres będzie animowany podczas pierwszego rysowania. Jeśli true, wykres zacznie się w punkcie odniesienia i będzie animowany do ostatniego stanu.

Położenie tytułów osi w porównaniu z miejscami na wykresie. Obsługiwane wartości:

• w – narysuj tytuły osi wewnątrz obszaru wykresu.
• Out - Narysuj tytuły osi poza obszarem wykresu.
• Brak – pomiń tytuły osi.

Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak 'red' lub '#00cc00', lub obiekt z tymi właściwościami.

Kolor obramowania wykresu w postaci ciągu kolorów HTML.

Szerokość obramowania w pikselach.

Kolor wypełnienia wykresu w postaci koloru HTML.

Obiekt z użytkownikami, który pozwala skonfigurować właściwości wizualne dymków.

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

Kolor kreski dymków.

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

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

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

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

• stroke: kolor podany w postaci szesnastkowej lub nazwy koloru angielskiego.
• strokeWidth: jeśli ta opcja jest dostępna, rysuje obramowanie wokół obszaru wykresu o danej szerokości i kolorze stroke.

Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi.

Odległość, w jakiej znajduje się wykres 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 jest ciągiem koloru HTML, np. colors:['red','#004411'].

Obiekt określający mapowanie między wartościami kolumn kolorów i kolorami lub skalą gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w ten sposób:

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

Jeśli jest podany, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub niższej będą renderowane jako pierwszy kolor w zakresie colorAxis.colors.

Jeśli jest podany, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub wyższej zostaną wyrenderowane 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. Te wartości mają zastosowanie do danych koloru wykresu. Kolorystyka odbywa się zgodnie z gradientem wartości podanych w tym miejscu. Brak wartości dla tej opcji to odpowiednik [minValue, maxValue].

Kolory, które można przypisać do wartości w wizualizacji. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. colorAxis: {colors:['red','#004411']}. Musisz mieć co najmniej 2 wartości. gradient będzie zawierał wszystkie wartości oraz obliczone wartości pośrednie – pierwszy kolor będzie najmniejszy, a ostatni – najwyższym.

Obiekt określający styl legendy gradientu.

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

• „top” – powyżej wykresu.
• „bottom” – pod wykresem.
• „w”: wewnątrz wykresu, u góry.
• „none” – nie wyświetla się żadna legenda.

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

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

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

Ciąg liczbowy etykiet liczbowych. Jest to podzbiór wzorca ICU. Na przykład {numberFormat:'.##'} będzie wyświetlać wartości „10.66”, „10.6” i „10.0” dla wartości 10.666, 10.6 i 10.

Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika.

Opcja explorer umożliwia użytkownikom przesuwanie i powiększanie wykresów Google. explorer: {} udostępnia domyślne działanie odkrywcy, umożliwiające użytkownikom przesunięcie w poziomie i w pionie przez przeciąganie oraz powiększanie i pomniejszanie poprzez przewijanie.

Ta funkcja jest eksperymentalna i w przyszłych wersjach może ulec zmianie.

Uwaga: eksplorator obsługuje tylko osie ciągłe (np. liczby lub daty).

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

• dragToPan: przeciągnij, aby przesunąć wykres w poziomie lub w pionie. Aby przesunąć tylko wzdłuż osi poziomej, użyj explorer: { axis: 'horizontal' }. To samo dotyczy osi pionowej.
• dragToZoom: domyślnie zachowanie odkrywcy polega na powiększaniu i pomniejszaniu widoku, gdy użytkownik przewija ekran. Jeśli używasz atrybutu explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, przeciągnij po prostokątnym obszarze, aby go powiększyć. Zalecamy korzystanie z właściwości rightClickToReset za każdym razem, gdy używana jest właściwość dragToZoom. Informacje o dostosowywaniu powiększenia znajdziesz w sekcjach explorer.maxZoomIn, explorer.maxZoomOut i explorer.zoomDelta.
• rightClickToReset: kliknięcie prawym przyciskiem myszy przywraca oryginalne ustawienie powiększenia i powiększenia.

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

Domyślnie użytkownicy mogą przesuwać widok bez względu na to, gdzie znajdują się dane. Aby użytkownicy nie mogli przesuwać treści poza oryginalny wykres, użyj funkcji explorer: { keepInBounds: true }.

Maksymalna wartość, którą może wyświetlić eksplorator. Domyślnie użytkownicy mogą powiększyć widok tak, aby zobaczyć tylko 25% oryginalnego widoku. Ustawienie explorer: { maxZoomIn: .5 } umożliwia użytkownikom powiększenie tylko na tyle blisko, aby zobaczyć połowę oryginalnego widoku.

Maksymalna wartość, którą eksplorator może pomniejszyć. Domyślnie użytkownicy będą mogli pomniejszyć obraz tak bardzo, że wykres zajmie tylko 1/4 dostępnego miejsca. Jeśli zasada jest ustawiona na explorer: { maxZoomOut: 8 }, użytkownicy mogą pomniejszać widok tak, że wykres zajmowałby tylko 1/8 dostępnego miejsca.

Gdy użytkownicy powiększają lub pomniejszają obraz, explorer.zoomDelta określa powiększenie. 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ć tę opcję, używając właściwości określonych elementów wykresu.

Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu.

Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame).

Obiekt z członkami, który służy do konfigurowania różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

Punkt odniesienia dla osi poziomej.

Kolor punktu odniesienia dla osi poziomej. Może to być dowolny ciąg kolorów HTML, np. 'red' lub '#00cc00'.

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

Formatujący ciąg etykiet liczbowych. Jest to podzbiór wzorca ICU. Na przykład w polu {format:'#,###%'} będą wyświetlane wartości „1000%”, „750%” i „50%” dla wartości 10, 7.5 i 0,5. Możesz też podać:

• {format: 'none'}: wyświetla liczby bez formatowania (np. 8000000)
• {format: 'decimal'}: wyświetla liczby z tysiącami separatorów (np. 8 000 000)
• {format: 'scientific'}: wyświetla liczby w notacji naukowej (np. 8e6).
• {format: 'currency'}: wyświetla liczby w walucie lokalnej (np. 8 000 000,00 USD)
• {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 całych słów (np. 8 mln)

Rzeczywiste formatowanie zastosowane do etykiety pochodzi z języka, w którym został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.

W obliczeniu wartości znaczników linii siatki i kilku linii siatki uwzględnianych jest kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii. Alternatywne wersje zostaną odrzucone, jeśli sformatowane etykiety znaczników będą zduplikowane lub nakładają się. Możesz więc określić format:"#", jeśli chcesz wyświetlać tylko znaczniki czasu jako liczby całkowitej. Pamiętaj jednak, że jeśli żaden inny warunek nie zostanie spełniony, żadne linie siatki ani znaczniki nie będą wyświetlane.

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 pionowo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej:

{color: '#333', minSpacing: 20}

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

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

Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. 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*/]},
  }
}
    

Dodatkowe informacje znajdziesz w artykule Daty i godziny.

Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines.

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

Opcja minorGridlines.count jest w większości wycofana, ale możesz wyłączyć drobne linie siatki, ustawiając liczbę na 0. Liczba mniejszych linii siatki zależy teraz całkowicie od przedziału czasu między głównymi liniami siatki (zobacz hAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (hAxis.minorGridlines.minSpacing).

Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. 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*/]},
  }
}
    

Dodatkowe informacje znajdziesz w artykule Daty i godziny.

Właściwość hAxis, która sprawia, że oś pozioma jest skalą logarytmiczną (wymaga podania wartości dodatnich). Ustaw „tak” dla wartości „tak”.

Właściwość hAxis, która sprawia, że oś pozioma jest skalą logarytmiczną. Użyj jednego z tych rodzajów wartości:

• null – nie przeprowadza się skalowania logarytmicznego.
• „log” – skalowanie logarytmiczne. Wartości ujemne i zero nie są wykresowane. Ta opcja jest taka sama jak ustawienie hAxis: { logscale: true }.
• „mirrorLog” – skalowanie logarytmiczne, w którym ujemna jest wartość ujemna i zero. Wykreślona wartość liczby ujemnej jest ujemna logu wartości bezwzględnej. Wartości zbliżone do 0 są przedstawiane na skali liniowej.

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

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

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

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

Zastępuje automatycznie generowane znaczniki osi X określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczbą, datą, datą lub godziną) lub obiektem. Jeśli jest to obiekt, powinien mieć właściwość v zawierającą wartość znacznika oraz opcjonalną właściwość f zawierającą ciąg literału, który ma być wyświetlany jako etykieta.

Wartość ViewWindow zostanie automatycznie rozwinięta, tak by obejmowała wartości minimalne i maksymalne, 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 na osi poziomej. Obiekt ma taki format:

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

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

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

Przenosi minimalną wartość osi poziomej do określonej wartości. W przypadku większości wykresów jest to lewo. Ignorowane, jeśli ustawiona wartość jest większa niż minimalna wartość X danych. hAxis.viewWindow.min zastępuje tę właściwość.

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

• „ładne” – przeskaluj wartości w poziomie, tak aby maksymalne i minimalne wartości danych były trochę renderowane wewnątrz obszaru po lewej i prawej stronie wykresu. Widok jest rozwinięty do najbliższej głównej linii siatki w przypadku liczb lub najbliższej linii podrzędnej dla dat i godzin.
• „maximized” – przeskaluj wartości w poziomie, tak aby maksymalne i minimalne wartości danych dotknęły lewą i prawą stronę wykresu. Spowoduje to zignorowanie elementów haxis.viewWindow.min i haxis.viewWindow.max.
• „explicit” - wycofana opcja umożliwiająca określenie wartości skalowania w lewo i w prawo na obszarze wykresu. (Wycofano, ponieważ nadmiarowe atrybuty 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 wartości maksymalne i minimalne.

Określa zakres przycięcia osi poziomej.

Maksymalna wartość danych w poziomie do wyrenderowania.

Ignorowany, gdy hAxis.viewWindowMode ma wartość „ładna” lub „zmaksymalizowana”.

Minimalna wartość danych w poziomie do wyrenderowania.

Ignorowany, gdy hAxis.viewWindowMode ma wartość „ładna” lub „zmaksymalizowana”.

Wysokość wykresu w pikselach.

Obiekt z użytkownikami do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

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

• „start” – dopasowane do początku obszaru przydzielonego do legendy.
• „center” – wyśrodkowana w obszarze przypisanym do legendy.
• „end” – wyrównana do końca obszaru przydzielonego do legendy.

Początek, środek i koniec są zależne od stylu legendy (pionowa lub pozioma). Na przykład w legendzie „prawa” odpowiednio „start” i „koniec” znajdują się odpowiednio u góry i u dołu. W przypadku legendy „górny”, „start” i „koniec” znajdziesz odpowiednio po lewej i prawej stronie obszaru.

Wartość domyślna zależy od pozycji legendy. W przypadku legend „bottom” domyślną wartością jest „center”, a w innych legendach – „start”.

Maksymalna liczba wierszy w legendzie. Ustaw większą liczbę niż 1, aby dodać wiersze do legendy. Uwaga: dokładna logika używana do określenia rzeczywistej liczby renderowanych linii jest nadal zmienna.

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

Początkowo wybrany indeks oparty na zerowej stronie legendy.

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

• „bottom” – pod wykresem.
• „po lewej” – po lewej stronie wykresu pod warunkiem, że nie jest z nim powiązana seria. Jeśli chcesz, aby legenda była widoczna po lewej stronie, użyj opcji targetAxisIndex: 1.
• „in”: wewnątrz wykresu, w lewym górnym rogu ekranu.
• „none” – nie wyświetla się żadna legenda.
• „right” (po prawej) – po prawej stronie wykresu. Niezgodne z opcją vAxes.
• „top” – powyżej wykresu.

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

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

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

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

Obiekt obiektów, gdzie klucze to nazwy serii (wartości w kolumnie Kolor) oraz każdy obiekt opisujący format odpowiedniej serii na wykresie. Jeśli seria lub wartość nie jest określona, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:

• color – kolor, który ma być używany w tej serii. Określ prawidłowy ciąg kolorów HTML.
• visibleInLegend – wartość logiczna, gdzie „true” oznacza, że seria powinna mieć legendę, a „false” – że nie. Wartość domyślna to true (prawda).

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

Obiekt z użytkownikami, który pozwala skonfigurować sposób powiązania wartości z rozmiarem dymka. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej:

 {minValue: 0,  maxSize: 20}

Maksymalny promień największego możliwego dymka w pikselach.

Wartość rozmiaru (jaka znajduje się w danych wykresu) zostanie zmapowana na sizeAxis.maxSize. Większe wartości zostaną przycięte do tej wartości.

Minimalny promień najmniejszego możliwego dymka w pikselach.

Wartość rozmiaru (jaka znajduje się w danych wykresu) zostanie zmapowana 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, dzięki czemu mniejsze dymki pojawiają się nad większymi dymkami. Jeśli ma wartość Fałsz, dymki są sortowane według kolejności w tabeli danych.

Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współdziałają ze sobą, aby osiągnąć określone zachowanie wykresu lub efektu wizualnego. Obecnie dostępny jest tylko jeden motyw:

• „maximized” – maksymalizuje obszar wykresu i rysuje legendę oraz wszystkie etykiety w obszarze 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.

Porównanie tytułu wykresu z obszarem obszaru wykresu. Obsługiwane wartości:

• in – – narysuj tytuł w obszarze wykresu.
• out – narysuj tytuł poza obszarem wykresu.
• none (brak) – pomiń tytuł.

Obiekt określający styl tekstu tytułu. Obiekt ma taki format:

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

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

Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej:

{textStyle: {color: '#FF0000'}, showColorCode: true}

Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki.

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

Obiekt określający styl tekstu etykietki. Obiekt ma taki format:

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

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

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

• „focus” – etykietka jest wyświetlana, gdy użytkownik najedzie kursorem na element.
• „none” – etykietka nie będzie wyświetlana.
• „selection” – etykietka będzie wyświetlana, gdy użytkownik wybierze element.

Obiekt z członkami, który służy do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

Właściwość vAxis określająca podstawę osi pionowej. Jeśli punkt odniesienia jest większy niż najwyższa linia siatki lub mniejszy niż najniższa linia siatki, zostanie zaokrąglony do najbliższej linii siatki.

Określa kolor punktu odniesienia dla osi pionowej. Może to być dowolny ciąg kolorów HTML, np. 'red' lub '#00cc00'.

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

Formatujący ciąg etykiet liczbowych. Jest to podzbiór wzorca ICU. Na przykład w polu {format:'#,###%'} będą wyświetlane wartości „1000%”, „750%” i „50%” dla wartości 10, 7.5 i 0,5. Możesz też podać:

• {format: 'none'}: wyświetla liczby bez formatowania (np. 8000000)
• {format: 'decimal'}: wyświetla liczby z tysiącami separatorów (np. 8 000 000)
• {format: 'scientific'}: wyświetla liczby w notacji naukowej (np. 8e6).
• {format: 'currency'}: wyświetla liczby w walucie lokalnej (np. 8 000 000,00 USD)
• {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 całych słów (np. 8 mln)

Rzeczywiste formatowanie zastosowane do etykiety pochodzi z języka, w którym został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.

W obliczeniu wartości znaczników linii siatki i kilku linii siatki uwzględnianych jest kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii. Alternatywne wersje zostaną odrzucone, jeśli sformatowane etykiety znaczników będą zduplikowane lub nakładają się. Możesz więc określić format:"#", jeśli chcesz wyświetlać tylko znaczniki czasu jako liczby całkowitej. Pamiętaj jednak, że jeśli żaden inny warunek nie zostanie spełniony, żadne linie siatki ani znaczniki nie będą wyświetlane.

Obiekt z członkami, który służy do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki osi pionowej są rysowane w poziomie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej:

{color: '#333', minSpacing: 20}

Kolor pionowych linii siatki wewnątrz obszaru wykresu. Określ prawidłowy ciąg kolorów HTML.

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

Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. 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*/]}
  }
}
    

Dodatkowe informacje znajdziesz w artykule Daty i godziny.

Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines.

Kolor pionowych linii siatki wewnątrz obszaru wykresu. Podaj prawidłowy ciąg kolorów HTML.

Opcja generalGridlines.count jest w większości wycofana. Wyjątkiem jest wyłączenie podrzędnych linii siatki przez ustawienie licznika na 0. Liczba mniejszych linii siatki zależy od przedziału 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 typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. 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*/]},
  }
}
    

Dodatkowe informacje znajdziesz w artykule Daty i godziny.

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

Właściwość vAxis sprawiająca, że oś pionowa jest skalą logarytmiczną. Użyj jednego z tych rodzajów wartości:

• null – nie przeprowadza się skalowania logarytmicznego.
• „log” – skalowanie logarytmiczne. Wartości ujemne i zero nie są wykresowane. Ta opcja jest taka sama jak ustawienie vAxis: { logscale: true }.
• „mirrorLog” – skalowanie logarytmiczne, w którym ujemna jest wartość ujemna i zero. Wykreślona wartość liczby ujemnej jest ujemna logu wartości bezwzględnej. Wartości zbliżone do 0 są przedstawiane na skali liniowej.

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

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

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

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

Zastępuje automatycznie generowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczbą, datą, datą lub godziną) lub obiektem. Jeśli jest to obiekt, powinien mieć właściwość v zawierającą wartość znacznika oraz opcjonalną właściwość f zawierającą ciąg literału, który ma być wyświetlany jako etykieta.

Wartość ViewWindow zostanie automatycznie rozwinięta, tak by obejmowała wartości minimalne i maksymalne, 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 określająca tytuł osi pionowej.

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

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

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

Przenosi maksymalną wartość osi pionowej do określonej wartości. W przypadku większości wykresów będzie ona większa. Ignorowane, jeśli ta wartość jest ustawiona na wartość mniejszą niż maksymalna wartość y danych. vAxis.viewWindow.max zastępuje tę właściwość.

Przenosi minimalną wartość osi pionowej do określonej wartości – w przypadku większości wykresów będzie ona niższa. Ignorowane, jeśli ta wartość jest ustawiona na wartość większą niż minimalna wartość y. vAxis.viewWindow.min zastępuje tę właściwość.

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

• „ładne” – skaluj wartości pionowe tak, aby maksymalne i minimalne wartości danych były trochę renderowane w dolnej i górnej części obszaru wykresu. Widok jest rozwinięty do najbliższej głównej linii siatki w przypadku liczb lub najbliższej linii podrzędnej dla dat i godzin.
• „maximized” – przeskaluj wartości pionowe tak, by maksymalne i minimalne wartości danych dotykały górnej i dolnej części obszaru wykresu. Spowoduje to zignorowanie elementów vaxis.viewWindow.min i vaxis.viewWindow.max.
• „explicit” – wycofana opcja określająca górne i dolne wartości skali obszaru wykresu. Wycofano, ponieważ atrybuty vaxis.viewWindow.min i vaxis.viewWindow.max są zbędne. Wartości danych wykraczające poza te wartości zostaną przycięte. Musisz określić obiekt vAxis.viewWindow opisujący wartości maksymalne i minimalne.

Określa zakres przycięcia osi pionowej.

Maksymalna wartość pionowych danych.

Ignorowany, gdy vAxis.viewWindowMode ma wartość „ładna” lub „zmaksymalizowana”.

Minimalna wartość danych pionowych do renderowania.

Ignorowany, gdy vAxis.viewWindowMode ma wartość „ładna” lub „zmaksymalizowana”.

Szerokość wykresu w pikselach.

Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia ready. Extended description,

Zwraca obiekt działania etykietki z wymaganym parametrem actionID.

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu id. Format elementu id nie został jeszcze udokumentowany (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 klinowej do wykresu kołowego

cli.getBoundingBox('slice#4')

Ramka ograniczająca dane z wykresu pionowego (np. kolumny):

cli.getBoundingBox('vAxis#0#gridline')

Ramka ograniczająca danych na wykresie poziomym (np. słupkowym):

cli.getBoundingBox('hAxis#0#gridline')

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

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend):

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 umieszczonym na ekranie miejscu na wykresie i jego elementach.

W zwróconym obiekcie można wywołać te metody:

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

Wywołuj je po narysowaniu wykresu.

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

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.

Patrz Drukowanie wykresów PNG.

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

Zwraca pionową wartość danych w miejscu yPosition, czyli w pikselach odsunięcia od górnej krawędzi kontenera wykresu. Może być ujemny.

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

Wywołuj je po narysowaniu wykresu.

Zwraca współrzędną x piksela 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.

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

Wywołuj je po narysowaniu wykresu.

Usuwa z wykresu etykietkę z żądaniem actionID.

Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.

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 pojawić się w etykiecie działania, oraz action, funkcję, która powinna być uruchamiana, gdy użytkownik kliknie tekst działania.

Przed wywołaniem metody draw() wykresu należy ustawić dowolne i wszystkie działania dotyczące etykietek. Rozszerzony opis.

Zaznacza określone elementy wykresu. Anuluje poprzedni wybór. Elementy, które można wybrać, to dymki. Na tym wykresie możesz wybrać tylko jeden element naraz. Extended description.

Czyści wykres i usuwa wszystkie przydzielone zasoby.

Uruchamiane po zakończeniu animacji przejścia.

Uruchamiane, gdy użytkownik kliknie wykres. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

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

Uruchamiane, gdy użytkownik kliknie legendę podziału na strony. Przekazuje aktualny indeks stron oparty na zerowej legendzie i łączną liczbę stron.

Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Dymek odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość NULL).

Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Dymek odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość NULL).

Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody draw i wywołanie ich dopiero po uruchomieniu zdarzenia.

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