Wykresy świecowe

Omówienie

Interaktywny wykres świecowych.

Wykres świecowy służy do wyświetlania wartości otwarcia i zamknięcia nałożonej na łączną wariancję. Wykresy świecowe są często używane do przedstawiania wartości akcji. Na tym wykresie elementy, w przypadku których wartość otwarcia jest niższa niż wartość zamknięcia (zysk), są rysowane jako wypełnione pola, a elementy, w przypadku których wartość otwarcia jest wyższa niż wartość zamknięcia (strata), są rysowane jako puste pola.

Przykład

<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([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

    var options = {
      legend:'none'
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Wykresy wodne

Przy odpowiednich zestawach opcji możesz tworzyć wykresy świecowe przypominające proste wykresy kaskadowe.

W poniższym kodzie eliminujemy górne wicketki, ponieważ w pierwszej i drugiej kolumnie masz takie same wartości, a w dolnej są one takie same w trzeciej i czwartej kolumnie. Ustawiono bar.groupWidth na '100%', aby usunąć odstępy między słupkami.

<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([
          ['Mon', 28, 28, 38, 38],
          ['Tue', 38, 38, 55, 55],
          ['Wed', 55, 55, 77, 77],
          ['Thu', 77, 77, 66, 66],
          ['Fri', 66, 66, 22, 22]
          // Treat the first row as data.
        ], true);

        var options = {
          legend: 'none',
          bar: { groupWidth: '100%' }, // Remove space between bars.
          candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
          }
        };

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

Obecnie nie ma możliwości łatwego oznaczania pasków. Najlepiej jest użyć nakładek.

Wczytuję

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

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

Nazwa klasy wizualizacji to google.visualization.CandlestickChart.

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

Format danych

Pięć lub więcej kolumn, w których pierwsza kolumna definiuje wartości osi X lub etykiety grup, a każda z tych czterech kolumn zawiera dane z innej serii.

  • Col 0: ciąg znaków (dyskretny) używany jako etykieta grupy na osi X albo liczba, data, data lub godzina (ciągłe) używane jako wartość na osi X.
  • Col 1: liczba określająca dolną/minimalną wartość tego znacznika. Ta wartość wyznacza dolny koniec środkowej linii świecy. Etykieta kolumny jest używana jako seria w legendzie (etykiety pozostałych kolumn są ignorowane).
  • Col 2: liczba określająca wartość otwarcia/początkowa tego znacznika. Ta wartość wyznacza jedną z krawędzi świecy – górną lub dolną. Jeśli będzie niższa od wartości z kolumny 3, świeca będzie wypełniona. W przeciwnym razie będzie pusta.
  • Col 3: liczba określająca wartość zamknięcia lub wartość końcową znacznika. Wyznacza ona drugą pionową krawędź świecy. Jeśli wartość jest niższa od wartości z kolumny 2, świeca będzie pusta. W przeciwnym razie będzie wypełniona.
  • Col 4: liczba określająca wysoką/maksymalną wartość tego znacznika. Ta wartość wyznacza górny koniec środkowej linii świecy.
  • Col 5 [opcjonalny]: etykietka lub kolumna styl dla świecy.
Aby uzyskać więcej serii, możesz dodać dodatkowe zestawy 4 kolumn o podobnej strukturze do kolumn 1–4. Każda z nich oznacza inną serię świec. Łączna liczba kolumn powinna być 4 razy większa niż liczba serii plus 1 (i opcjonalne kolumny z etykietkami).

Opcje konfiguracji

Nazwa
cel agregacji
Sposób wyboru wielu danych w etykietkach:
  • 'category': pogrupuj dane według wartości x.
  • 'series': grupuj wybrane dane według serii.
  • 'auto': pogrupuj wybrane dane według wartości X, jeśli wszystkie wybrane elementy mają tę samą wartość x. W przeciwnym razie pogrupuj je.
  • 'none': pokaż tylko 1 etykietkę na wybór.
aggregationTarget jest często używany w połączeniu z usługami selectionMode i tooltip.trigger, np.:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
Typ: ciąg znaków
Domyślny: „auto”.
animacja.czas trwania

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

Typ: liczba
Wartość domyślna: 0
animacja.wygładzanie

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ć.
Typ: ciąg znaków
Domyślnie: „linear”
animacje.startup,

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.

Typ: wartość logiczna
Default (Fałsz) – wartość domyślna
Położenietytułu osi

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.
Typ: ciąg znaków
Domyślny: „out”
backgroundColor,

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.

Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
backgroundColor.type

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

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

Szerokość obramowania w pikselach.

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

Kolor wypełnienia wykresu w postaci koloru HTML.

Typ: ciąg znaków
Domyślny: „biały”.
bar.grupaSzerokość
Szerokość grupy świecowych określona w jednym z tych formatów:
  • Piksele (np. 50).
  • Odsetek dostępnej szerokości każdej grupy (np. „20%”), gdzie „100%” oznacza, że nie ma między nimi spacji.
Typ: liczba lub ciąg
Domyślny: złoty współczynnik, ok. „61,8%”.
candlestick.hollowIsRise

Jeśli ustawisz wartość prawda, rosnące świece będą wyglądały na puste, a świecące spadające – w przeciwnym razie będą puste.

Typ: wartość logiczna
Wartość domyślna: false (później zostanie zmieniona na prawda)
candlestick.fallingColor.fill

Kolor wypełnienia spadkowych świec w postaci ciągu kolorów HTML.

Typ: ciąg znaków
Domyślny: automatycznie (zależnie od koloru serii i pustego pola)
candlestick.fallingColor.style

Kolor kreski świeczek jako ciąg znaków koloru HTML.

Typ: ciąg znaków
Domyślny:auto (kolor serii)
candlestick.fallingColor.rayWidth

Szerokość kreski świeczek jako ciąg znaków koloru HTML.

Typ: 2
Wartość domyślna: liczba
candlestick.risingColor.fill

Kolor wypełnienia świec w postaci łańcucha kolorów HTML.

Typ: ciąg znaków
Domyślny: automatyczny (biały lub kolor serii, w zależności od pustego obszaru)
candlestick.risingColor.style

Kolor kreski świec zachodzących jako łańcuch kolorów HTML.

Typ: ciąg znaków
Domyślny: automatyczny (kolor serii lub biały, w zależności od pustego obszaru)
candlestick.risingColor.rayWidth

Szerokość kreski świecek w postaci ciągu HTML.

Typ: liczba
Wartość domyślna: 2
obszarGraficzny

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

Typ: obiekt
Domyślne: null
chartArea.backgroundColor.
Kolor tła wykresu. Ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielskiej nazwy koloru. Podczas korzystania z tych obiektów możesz podać te właściwości:
  • 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.
Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
wykresArea.left

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

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
wykresArea.top

Odległość, w jakiej znajduje się wykres od górnej krawędzi.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
chartArea.width

Szerokość obszaru wykresu.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
wykresArea.height

Wysokość obszaru wykresu.

Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
kolory

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

Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
włącz interfejs interaktywny

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.

Typ: wartość logiczna
Wartość domyślna: true
cel główny

Typ jednostki, która otrzymuje kursor myszy. Ma też wpływ na to, który element jest wybierany przez kliknięcie myszą, a który element tabeli danych jest powiązany ze zdarzeniami. Może to być:

  • „datum” – skoncentruj się na jednym punkcie danych. Odpowiada komórce komórki tabeli danych.
  • „category” – skup się na pogrupowaniu wszystkich punktów danych wzdłuż głównej osi. Odpowiada wierszowi w tabeli danych.

W polu „target” (grupa docelowa) etykietka zawiera wszystkie wartości kategorii. Może to być przydatne do porównywania wartości różnych serii.

Typ: ciąg znaków
Domyślny: „datum”
rozmiar czcionki

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.

Typ: liczba
Domyślna: automatycznie.
Czcionka

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.

Typ: ciąg znaków
Domyślny: „solarmora”
forceIFrame

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

Typ: wartość logiczna
Wartość domyślna: false
Oś h

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'
  }
}
    
Typ: obiekt
Domyślne: null
Numer hAxis.baseline

Punkt odniesienia dla osi poziomej.

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: liczba
Domyślna:automatycznie.
xAxis.baselineColor

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: liczba
Domyślny: „czarny”.
hAxis.direction,

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

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

Ciąg tekstowy dla etykiet liczbowych lub osi osi.

W przypadku etykiet osi numerycznych jest to podzbiór formatowania dziesiętnego zestawu wzorców 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)

W przypadku etykiet osi daty jest to podzbiór formatowania daty zestawu wzorców ICU. Na przykład {format:'MMM d, y'} wyświetli wartość „1 lipca 2011 r.” dla pierwszego lipca 2011 r.

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.

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: ciąg znaków
Ustawienie domyślne: automatyczne
Linia hAxis.gridline

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}

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: obiekt
Domyślne: null
Oś hA.grid.color

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

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

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.

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

Tablica rozmiarów (jako wartości danych, a nie piksele) między sąsiednimi siatkami. W tej chwili ta opcja dotyczy tylko osi numerycznych, ale jest to odpowiednik opcji gridlines.units.<unit>.interval, które są używane tylko do określania dat i godzin. W przypadku skali linearnej wartością domyślną jest [1, 2, 2.5, 5], co oznacza, że wartości linii siatki mogą być przypisywane do każdej jednostki (1), do jednostek parzystych (2) lub wielokrotności liczby 2,5 lub 5. Pod uwagę brana jest też wartość 10 razy większa (np. [10, 20, 25, 50] oraz [,1, 0,2, 25, 0,5]). W przypadku skal logów domyślna wartość to [1, 2, 5].

Typ: liczba od 1 do 10 (z wyłączeniem 10).
Wartość domyślna: obliczona
xAxis.gridlines.minSpacing,

Minimalny odstęp ekranu (w pikselach) między głównymi liniami hAxis. Domyślnym ustawieniem głównych linii siatki jest 40 dla skal linearnych i 20 dla skal logu. Jeśli określisz count, a nie minSpacing, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast podasz wartość minSpacing, a nie count, liczenie zostanie obliczone na podstawie parametru minSpacing. Jeśli podasz oba, ustawienia minSpacing zastąpią ustawienia.

Typ: liczba
Wartość domyślna: obliczona
xAxis.gridlines.multiple

Wszystkie wartości siatki i znaczników muszą być wielokrotnością wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów, moc 10-krotność wielokrotności nie jest brana pod uwagę. Aby wymusić znaczniki wyboru jako liczby całkowite, podaj gridlines.multiple = 1 lub znaczniki jako wielokrotności liczby 1000 określone przez właściwość gridlines.multiple = 1000.

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

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.

Typ: obiekt
Domyślne:null
Linie siatki xAxis.minorGridline

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: obiekt
Domyślne: null
xAxis.minorGridlines.color

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

Typ: ciąg znaków
Domyślne:połączenie kolorów siatki i tła.
hAxis.minorGridlines.interval

Opcja majorGridlines.interval jest podobna do opcji odstępów głównych linii siatki, ale wybrany przedział jest zawsze równym dzielnikiem głównych linii siatki. Domyślny przedział na wagach liniowych to [1, 1.5, 2, 2.5, 5], a skala logów to [1, 2, 5].

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

Minimalny wymagany odstęp (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między siatką a dużą siatką. Wartość domyślna to 1/2 minSpacing mainline of line lines for skale linearne i 1/5 minSpacing for log scales.

Typ: liczba
Wartość domyślna: obliczona
hAxis.minorGridlines.multiple

To samo co w przypadku wersji głównej gridlines.multiple.

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

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

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

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.

Typ: obiekt
Domyślne:null
hAxis.logScale

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: wartość logiczna
Wartość domyślna: false
TypHaxis.scaleType

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.

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

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

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

Typ: ciąg znaków
Domyślny: „out”
xAxis.textStyle

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.

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

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: tablica elementów
Ustawienie domyślne: automatyczne
xAxis.title,

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

Typ: ciąg znaków
Domyślne:null
xAxis.titleTextStyle

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.

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

Jeśli ma wartość Fałsz, zewnętrzne etykiety są ukrywane, a nie przycinane przez kontener wykresu. Jeśli ustawisz wartość prawda, przycinanie etykiet będzie możliwe.

Ta opcja jest obsługiwana tylko w przypadku osi discrete.

Typ: wartość logiczna
Wartość domyślna: false
xAxis.slantedText

Jeśli wartość to prawda, narysuj tekst osi poziomej pod kątem. W ten sposób możesz zmieścić na osi więcej tekstu, a w przeciwnym razie narysuj tekst osi pionowej. Domyślnym zachowaniem jest nieprzychylny tekst, jeśli po najechaniu na całość nie mieści się on w całości. Pamiętaj, że ta opcja jest dostępna tylko wtedy, gdy hAxis.textPosition ma wartość „out” (domyślna). Domyślnym ustawieniem daty i godziny jest false.

Typ: wartość logiczna
Domyślna:automatycznie.
Obiekty hAxis.slantedTextAngle

Kąt tekstu na osi poziomej (jeśli jest skośny). Ignorowana, jeśli element hAxis.slantedText jest w trybie false lub jest w trybie automatycznym, a postanawia on narysować tekst w poziomie. Jeśli kąt jest dodatni, obrót odbywa się w lewo, a w przypadku ujemnego – w prawo.

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

Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstu na osi staną się zbyt zatłoczone, serwer może przesunąć sąsiadujące etykiety w górę lub w dół, aby zmieścić je bliżej. Ta wartość określa największą liczbę poziomów do wykorzystania. Jeśli etykiety pasują do siebie bez nakładania się, serwer może stosować ich mniej. W przypadku dat i godzin domyślna wartość wynosi 1.

Typ: liczba
Wartość domyślna: 2
xAxis.maxTextLine

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

Typ: liczba
Ustawienie domyślne: automatyczne
xAxis.minTextSpacing,

Minimalne odstępy w poziomie (w pikselach) między 2 przylegającymi etykietami tekstu. Jeśli etykiety są zbyt gęsto rozmieszczone lub są zbyt długie, odstępy te mogą spaść poniżej tego progu i w tym przypadku zostanie zastosowane jedno z rozwiązań umożliwiających rozmycie etykiet (np.obcięcie etykiet lub usunięcie ich niektórych).

Typ: liczba
Wartość domyślna: wartość hAxis.textStyle.fontSize
hAxis.showTextCo

Liczba etykiet osi poziomej (1 oznacza każdą etykietę, 2 oznacza każdą inną etykietę itd.). Domyślnie wyświetlane są jak najwięcej etykiet bez nakładania się.

Typ: liczba
Domyślna:automatycznie.
xAxis.maxValue

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: liczba
Domyślna: automatycznie.
xAxis.minValue

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

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: liczba
Domyślna:automatycznie.
Tryb xAxis.viewWindow

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.

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo, haxis.viewWindow.min i haxis.viewWindow.max mają pierwszeństwo.
Widok xA.is

Określa zakres przycięcia osi poziomej.

Typ: obiekt
Domyślne: null
Oś hx.viewWindow.max
  • W przypadku osi continuous:

    Maksymalna wartość danych w poziomie do wyrenderowania.

  • W przypadku osi discrete:

    Indeks wiersza oparty na zero, w którym kończy się okno przycinania. Punkty danych w tym indeksie lub wyższym zostaną przycięte. W połączeniu z wartością vAxis.viewWindowMode.min definiuje półprzezroczysty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Oznacza to, że będzie wyświetlany każdy indeks w wysokości min <= index < max.

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

Typ: liczba
Ustawienie domyślne: automatyczne
xAxis.viewWindow.min
  • W przypadku osi continuous:

    Minimalna wartość danych w poziomie do wyrenderowania.

  • W przypadku osi discrete:

    Indeks wiersza oparty na zero, od którego rozpoczyna się okno przycinania. Punkty danych znajdujące się poniżej indeksów będą przycięte. W połączeniu z wartością vAxis.viewWindowMode.max definiuje półprzezroczysty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Oznacza to, że będzie wyświetlany każdy indeks w wysokości min <= index < max.

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

Typ: liczba
Ustawienie domyślne: automatyczne
wysokość

Wysokość wykresu w pikselach.

Typ: liczba
Domyślna:wysokość elementu, który go zawiera.
legenda

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}}
Typ: obiekt
Domyślne: null
legend.alignment,

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

Typ: ciąg znaków
Domyślna:automatycznie.
legend.maxLines

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

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

Początkowo wybrany indeks oparty na zerowej stronie legendy.

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 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.
Typ: ciąg znaków
Domyślny: „right”
legend.textStyle,

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.

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

Orientacja wykresu. Jeśli ustawisz wartość 'vertical', oś zostanie obrócona tak, aby (na przykład) wykres kolumnowy stał się wykresem słupkowym, a wykres warstwowy rozwija się w prawo zamiast w górę:

Typ: ciąg znaków
Wartość domyślna: „pozioma”
odwrócone kategorie

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

Ta opcja jest obsługiwana tylko w przypadku osi discretemajor.

Typ: wartość logiczna
Wartość domyślna: false
Tryb wyboru

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

Typ: ciąg znaków
Wartość domyślna: „single”
seriale

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 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.
  • fallingColor.fill – zastępuje globalną wartość candlestick.fallingColor.fill w przypadku tej serii.
  • fallingColor.stroke – zastępuje globalną wartość candlestick.fallingColor.stroke w przypadku tej serii.
  • fallingColor.strokeWidth – zastępuje globalną wartość candlestick.fallingColor.strokeWidth w przypadku tej serii.
  • labelInLegend – opis serii, która pojawi się w legendzie wykresu.
  • risingColor.fill – zastępuje globalną wartość candlestick.risingColor.fill w przypadku tej serii.
  • risingColor.stroke – zastępuje globalną wartość candlestick.risingColor.stroke w przypadku tej serii.
  • risingColor.strokeWidth – zastępuje globalną wartość candlestick.risingColor.strokeWidth w przypadku tej serii.
  • targetAxisIndex – oś, do której chcesz przypisać tę serię, gdzie 0 to oś domyślna, a 1 to oś przeciwna. Wartość domyślna to 0. Ustaw wartość 1, aby zdefiniować wykres, w którym poszczególne serie są renderowane na różnych osiach. Co najmniej 1 seria została przypisana do osi domyślnej. Możesz zdefiniować inną skalę dla różnych osi.
  • visibleInLegend – wartość logiczna, gdzie „true” oznacza, że seria powinna mieć legendę, a „false” – że nie. Wartość domyślna to true (prawda).

Możesz podać tablicę obiektów, z których każdy dotyczy serii, w określonej kolejności, lub obiekt, w którym każdy element podrzędny ma klucz numeryczny, który wskazuje serię. Na przykład te 2 deklaracje są identyczne, deklarując pierwszą serię jako czarną i nieobecną w legendie, a czwartą jako czerwoną i nieobecną w legendie:

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
Domyślnie: {}
motyw

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'}
            
Typ: ciąg znaków
Domyślne: null
tytuł

Tekst do wyświetlenia nad wykresem.

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

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ł.
Typ: ciąg znaków
Domyślny: „out”
stylTextTextStyle

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.

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

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}
Typ: obiekt
Domyślne:null
tooltip.ignoreBounds

Jeśli ustawiona jest wartość true, rysunki etykiet mogą wychodzić poza granice wykresu ze wszystkich stron.

Uwaga: dotyczy to tylko etykietek HTML. Jeśli ta opcja jest włączona w przypadku etykietek SVG, wszystkie nadmiary wykraczające poza granice wykresu zostaną przycięte. Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki.

Typ: wartość logiczna
Wartość domyślna: false
tooltip.isHtml

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.

Typ: wartość logiczna
Wartość domyślna: false
tooltip.showColorCode

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

Typ: wartość logiczna
Domyślna:automatycznie.
tooltip.textStyle

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.

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:

  • „focus” – etykietka jest wyświetlana, gdy użytkownik najedzie kursorem na element.
  • „none” – etykietka nie będzie wyświetlana.
Typ: ciąg znaków
Domyślny: „focus”
vAxes,

Określa właściwości poszczególnych osi pionowych, jeśli wykres ma kilka osi. Każdy obiekt podrzędny to obiekt vAxis, który może zawierać wszystkie właściwości obsługiwane przez vAxis. Te wartości zastępują wszystkie ustawienia globalne tej samej usługi.

Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą series.targetAxisIndex, a potem skonfiguruj oś z użyciem vAxes. Ten przykład przypisuje serię 2 do prawej osi i określa dla niej 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ą: jest to zbiór obiektów każdy z etykietą liczbową określającą oś – jest to format przedstawiony powyżej; tablica to tablica obiektów, po jednym na osi. Na przykład ta notacja w stylu tablicy jest identyczna jak obiekt vAxis przedstawiony powyżej:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Typ: tablica obiektów lub obiektów podrzędnych
Domyślne:null
Oś vs

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'}}
Typ: obiekt
Domyślne: null
Wartość vAxis.baseline

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.

Typ: liczba
Domyślna:automatycznie.
KolorAxis.baseline

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

Typ: liczba
Domyślny: „czarny”.
OśAvis.direction

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.

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

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.

Typ: ciąg znaków
Ustawienie domyślne: automatyczne
Linie siatki vAxis.grid

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}
Typ: obiekt
Domyślne: null
OśA.vsiat.grid.color

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

Typ: ciąg znaków
Domyślny: „#CCC”
OśAvis.grid.count

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.

Typ: liczba
Wartość domyślna: -1
OśAvis.grid.interval

Tablica rozmiarów (jako wartości danych, a nie piksele) między sąsiednimi siatkami. W tej chwili ta opcja dotyczy tylko osi numerycznych, ale jest to odpowiednik opcji gridlines.units.<unit>.interval, które są używane tylko do określania dat i godzin. W przypadku skali linearnej wartością domyślną jest [1, 2, 2.5, 5], co oznacza, że wartości linii siatki mogą być przypisywane do każdej jednostki (1), do jednostek parzystych (2) lub wielokrotności liczby 2,5 lub 5. Pod uwagę brana jest też wartość 10 razy większa (np. [10, 20, 25, 50] oraz [,1, 0,2, 25, 0,5]). W przypadku skal logów domyślna wartość to [1, 2, 5].

Typ: liczba od 1 do 10 (z wyłączeniem 10).
Wartość domyślna: obliczona
Oś vAxis.gridlines.minSpacing

Minimalny odstęp ekranu (w pikselach) między głównymi liniami hAxis. Domyślnym ustawieniem głównych linii siatki jest 40 dla skal linearnych i 20 dla skal logu. Jeśli określisz count, a nie minSpacing, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast podasz wartość minSpacing, a nie count, liczenie zostanie obliczone na podstawie parametru minSpacing. Jeśli podasz oba, ustawienia minSpacing zastąpią ustawienia.

Typ: liczba
Wartość domyślna: obliczona
OśAvs.grid.multiple

Wszystkie wartości siatki i znaczników muszą być wielokrotnością wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów, moc 10-krotność wielokrotności nie jest brana pod uwagę. Aby wymusić znaczniki wyboru jako liczby całkowite, podaj gridlines.multiple = 1 lub znaczniki jako wielokrotności liczby 1000 określone przez właściwość gridlines.multiple = 1000.

Typ: liczba
Wartość domyślna: 1
Oś vas.grid.units

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.

Typ: obiekt
Domyślne: null
Linie siatki vAxis.minorGrids

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

Typ: obiekt
Domyślne: null
Oś v.is.minor.net.kolor

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

Typ: ciąg znaków
Domyślne: połączenie kolorów siatki i tła.
vAxis.minorGridlines.count,

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

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

Opcja majorGridlines.interval jest podobna do opcji odstępów głównych linii siatki, ale wybrany przedział jest zawsze równym dzielnikiem głównych linii siatki. Domyślny przedział na wagach liniowych to [1, 1.5, 2, 2.5, 5], a skala logów to [1, 2, 5].

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

Minimalny wymagany odstęp (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między siatką a dużą siatką. Wartość domyślna to 1/2 minSpacing mainline of line lines for skale linearne i 1/5 minSpacing for log scales.

Typ: liczba
Wartość domyślna: obliczona
Oś vAxis.minorGridline.multiple

To samo co w przypadku wersji głównej gridlines.multiple.

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

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.

Typ: obiekt
Domyślne: null
vAxis.logScale

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

Typ: wartość logiczna
Wartość domyślna: false
TypAxis.scale

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.

Ta opcja jest obsługiwana tylko w przypadku osi continuous.

Typ: ciąg znaków
Domyślne:null
Oś vAxis.text

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

Typ: ciąg znaków
Domyślny: „out”
StylAxis.text

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.

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

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] }
Typ: tablica elementów
Ustawienie domyślne: automatyczne
OśAvis.title

Właściwość vAxis określająca tytuł osi pionowej.

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

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.

Typ: obiekt
Domyślnie: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Wartość xAxis.max

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

Typ: liczba
Domyślna: automatycznie.
WartośćAxis.minValue

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

Typ: liczba
Domyślne: null
TrybAvis.viewWindow

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.
Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo, vaxis.viewWindow.min i vaxis.viewWindow.max mają pierwszeństwo.
Oś-v.is.is

Określa zakres przycięcia osi pionowej.

Typ: obiekt
Domyślne: null
Oś v.axis.max

Maksymalna wartość pionowych danych.

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

Typ: liczba
Ustawienie domyślne: automatyczne
Axis.viewWindow.min

Minimalna wartość danych pionowych do renderowania.

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

Typ: liczba
Ustawienie domyślne: automatyczne
szerokość

Szerokość wykresu w pikselach.

Typ: liczba
Domyślna – szerokość elementu, który zawiera.

Metody

Metoda
draw(data, options)

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

Typ zwrotu: brak
getAction(actionID)

Zwraca obiekt działania etykietki z wymaganym parametrem actionID.

Typ zwrotu: obiekt
getBoundingBox(id)

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.

Typ zwrotu: obiekt
getChartAreaBoundingBox()

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.

Typ zwrotu: obiekt
getChartLayoutInterface()

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.

Typ zwrotu: obiekt
getHAxisValue(xPosition, optional_axis_index)

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.

Typ zwrotu: numer
getImageURI()

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Patrz Drukowanie wykresów PNG.

Typ zwrotu: ciąg znaków
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to świece, pozycje z legend i kategorie. Na tym wykresie w danym momencie możesz wybrać tylko 1 element. Extended description.

Typ zwrotu: tablica elementów wyboru.
getVAxisValue(yPosition, optional_axis_index)

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.

Typ zwrotu: numer
getXLocation(dataValue, optional_axis_index)

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.

Typ zwrotu: numer
getYLocation(dataValue, optional_axis_index)

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.

Typ zwrotu: numer
removeAction(actionID)

Usuwa z wykresu etykietkę z żądaniem actionID.

Typ zwrotu: none
setAction(action)

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.

Typ zwrotu: none
setSelection()

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

Typ zwrotu: brak
clearChart()

Czyści wykres i usuwa wszystkie przydzielone zasoby.

Typ zwrotu: brak

Zdarzenia

Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, 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. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety.

Właściwości: targetID
error

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

Właściwości: id, message
legendpagination

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

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

Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Świecowy wiąże się z komórką w tabeli danych, wpis legendy w kolumnie (indeks wiersza ma wartość null) i kategoria w wierszu (indeks kolumny ma wartość null).

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

Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Świecowy wiąże się z komórką w tabeli danych, wpis legendy w kolumnie (indeks wiersza ma wartość null) i kategoria w wierszu (indeks kolumny ma wartość null).

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

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.

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 do żadnego serwera.