Ta strona została przetłumaczona przez Cloud Translation API.

Wizualizacja: wykres kolumnowy

Omówienie

Wykres kolumnowy to pionowy wykres słupkowy renderowany w przeglądarce za pomocą SVG lub VML (w zależności od tego, który typ jest odpowiedni dla przeglądarki użytkownika). Podobnie jak wszystkie wykresy Google, wykresy kolumnowe wyświetlają etykietki, gdy użytkownik najedzie kursorem na dane. Poziomą wersję tego wykresu znajdziesz na wykresie słupkowym.

Przykłady

Kolumny kolorów

Zapiszmy gęstość czterech metali szlachetnych:

Powyżej wszystkie kolory są domyślnym kolorem niebieskim. Dzieje się tak, ponieważ są one częścią tej samej serii. Gdyby istnieje druga seria, miałaby ona kolor czerwony. Te kolory możemy dostosować za pomocą roli stylu:

Istnieją 3 sposoby wyboru kolorów, a wszystkie są dostępne w naszej tabeli danych: wartości RGB, angielskie nazwy kolorów i deklaracja podobna do CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Style kolumn

Rola stylu pozwala kontrolować kilka aspektów wyglądu kolumny za pomocą deklaracji podobnych do CSS:

color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width

Nie zalecamy zbyt swobodnego mieszania stylów na wykresie – wybierz styl i trzymaj się go. Aby zaprezentować wszystkie atrybuty stylu, możesz skorzystać z próbki:

W pierwszych 2 kolumnach znajduje się określony color (pierwsza z angielską nazwą, a druga z wartością RGB). Nie wybrano obiektu opacity, więc używana jest domyślna wartość 1,0 (w pełni nieprzezroczysta), dlatego druga kolumna zasłania za nią linię siatki. W 3 kolumnie użyto opacity o wartości 0, 2, co wyświetla linię siatki. W czwartym używane są 3 atrybuty stylu: stroke-color i stroke-width do rysowania obramowania oraz fill-color do określania koloru prostokąta wewnątrz. Pierwsza kolumna po prawej stronie dodatkowo używa właściwości stroke-opacity i fill-opacity do określenia przezroczystości obramowania i wypełnienia:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Kolumny etykiet

Wykresy mają różne rodzaje etykiet, np. etykiety znaczników, legendy i etykiety na etykietkach. W tej sekcji zobaczysz, jak umieszczać etykiety w kolumnach na wykresie kolumnowym (lub w ich pobliżu).

Załóżmy, że chcemy oznaczyć każdą kolumnę odpowiednim symbolem chemicznym. Umożliwia to rola adnotacji:

W naszej tabeli danych definiujemy nową kolumnę z atrybutem { role: 'annotation' }, która będzie zawierać etykiety kolumn:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Użytkownicy mogą najeżdżać kursorem na kolumny, aby zobaczyć wartości danych, ale warto też uwzględnić je w samych kolumnach:

Jest to nieco bardziej skomplikowane, niż powinno być, ponieważ tworzymy DataView, aby określić adnotację dla każdej kolumny.

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Aby sformatować wartość w inny sposób, możemy zdefiniować element formatter i zapakować go w taką funkcję:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Możemy wtedy zadzwonić za pomocą numeru calc: getValueAt.bind(undefined, 1).

Jeśli etykieta jest zbyt duża i mieści się w całości w kolumnie, jest wyświetlana na zewnątrz:

Skumulowane wykresy kolumnowe

Skumulowany wykres kolumnowy to wykres kolumnowy, w którym powiązane wartości są umieszczone jeden na drugim. Jeśli występują jakieś wartości ujemne, są one skumulowane w odwrotnej kolejności poniżej wartości bazowej wykresu. Zwykle jest on używany, gdy kategoria w naturalny sposób dzieli się na komponenty. Weźmy na przykład kilka hipotetycznych wartości sprzedaży książek podzielonych według gatunku i porównywanych w czasie:

Aby utworzyć skumulowany wykres kolumnowy, ustaw opcję isStacked na true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

Skumulowane wykresy kolumnowe obsługują też skumulowanie 100%, gdzie stosy elementów przy poszczególnych wartościach domeny są przeskalowane w taki sposób, że sumują się do 100%. Dostępne opcje to isStacked: 'percent', który formatuje każdą wartość jako procent 100%, oraz isStacked: 'relative', który formatuje każdą wartość jako ułamek 1. Istnieje też opcja isStacked: 'absolute', która jest odpowiednikiem funkcji isStacked: true.

Uwaga: na wykresie skumulowanym 100% po prawej stronie wartości znaczników są oparte na względnej skali 0–1 jako ułamków 1, ale wartości na osi są wyświetlane jako wartości procentowe. Wynika to z faktu, że znaczniki osi procentowej są wynikiem zastosowania formatu „#.##%” do względnych wartości skali 0–1. Jeśli używasz isStacked: 'percent', pamiętaj, by wszystkie znaczniki lub wartości osi określić za pomocą względnej skali 0–1.

Skumulowany

        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };

Skumulowany 100%

        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Tworzenie wykresów kolumnowych Materiał

W 2014 r. firma Google przedstawiła wytyczne mające na celu zapewnienie spójnego wyglądu i sposobu działania usług i aplikacji (np. aplikacji na Androida) działających na platformach Google. Nazywamy go Material Design. Udostępnimy „Material” wersje wszystkich naszych podstawowych wykresów. Możesz z nich korzystać, jeśli podoba Ci się ich wygląd.

Tworzenie wykresu kolumnowego materiału jest podobne do tworzenia „klasycznego” wykresu kolumnowego. Wczytujesz interfejs GoogleVisual API (mimo że z pakietem 'bar' zamiast z pakietem 'corechart'), definiujesz swoją tabelę danych, a następnie tworzysz obiekt (ale klasy google.charts.Bar zamiast google.visualization.ColumnChart).

Wykres słupkowy i wykres kolumnowy są zasadniczo identyczne, ale ze względu na orientację nazywamy oba wykresy słupkowe niezależnie od tego, czy są one pionowe (klasycznie wykres kolumnowy) czy poziome (słupkowy). W przypadku interfejsu Material Jedyna różnica występuje w opcji bars. Po ustawieniu wartości 'horizontal' orientacja zbliże się do tradycyjnego klasycznego wykresu słupkowego. W przeciwnym razie słupki będą wyświetlane pionowo.

Uwaga: Wykresy Material Design nie działają w starszych wersjach Internet Explorera. IE8 i starsze wersje nie obsługują SVG, których wymaga Material Charts.

Wykresy kolumnowe materiałów mają wiele drobnych ulepszeń w porównaniu z klasycznymi wykresami kolumnowymi, w tym ulepszoną paletę kolorów, zaokrąglone rogi, bardziej przejrzyste formatowanie etykiet, mniejsze domyślne odstępy między seriami, delikatniejsze linie siatki i tytuły (oraz dodanie napisów).

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Wykresy Material Design są w wersji beta. Wygląd i interaktywność są w dużej mierze ostateczne, ale wiele opcji dostępnych w klasycznych wykresach nie jest jeszcze dostępnych. Listę opcji, które nie są jeszcze obsługiwane, znajdziesz w tym problemie.

Ponadto sposób deklarowania opcji nie jest sfinalizowany, dlatego jeśli używasz którejś z opcji klasycznych, musisz przekonwertować tę opcję na opcje materiału, zastępując ten wiersz:

chart.draw(data, options);

...tym fragmentem:

chart.draw(data, google.charts.Bar.convertOptions(options));

Korzystając z google.charts.Bar.convertOptions(), możesz korzystać z określonych funkcji, takich jak opcje gotowego ustawienia hAxis/vAxis.format.

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

function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'vertical',
          vAxis: {format: 'decimal'},
          height: 400,
          colors: ['#1b9e77', '#d95f02', '#7570b3']
        };

var chart = new google.charts.Bar(document.getElementById('chart_div'));

chart.draw(data, google.charts.Bar.convertOptions(options));

var btns = document.getElementById('btn-group');

btns.onclick = function (e) {

if (e.target.tagName === 'BUTTON') {
            options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
            chart.draw(data, google.charts.Bar.convertOptions(options));
          }
        }
      }

Wykresy Dual-Y

Czasami na wykresie kolumnowym chcesz wyświetlić 2 serie z 2 niezależnymi osiami Y: lewą dla jednej serii i prawą dla innej:

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

function drawStuff() {

var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

drawMaterialChart();
    };

Zwróć uwagę, że nasze 2 osie y mają różne oznaczenia („parseki” i „Wielkość pozorna”), ale każda z nich ma własne, niezależne skale i linie siatki. Jeśli chcesz dostosować to działanie, użyj opcji vAxis.gridlines.

W poniższym kodzie opcje axes i series razem określają wygląd wykresu pod postacią osi Y. Opcja series określa, która oś ma być używana w przypadku każdej z nich ('distance' i 'brightness'; nie muszą one mieć żadnego związku z nazwami kolumn w tabeli danych). Za pomocą opcji axes zostanie przekształcony w wykres podwójny Y, którego oś 'distance' zostanie umieszczona po lewej stronie (oznaczona jako „parsecs”), a oś 'brightness' po prawej (oznaczona „Wielkość pozorna”).

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Listy przebojów X

Uwaga: osie Top-X są dostępne tylko w przypadku wykresów materiałowych (tj. tych z pakietem bar).

Jeśli chcesz umieścić etykiety i tytuł osi X na górze wykresu, a nie na dole, możesz to zrobić w przypadku wykresów materiałowych za pomocą opcji axes.x:

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

function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "corechart". Nazwa klasy wizualizacji to google.visualization.ColumnChart.

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

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

W przypadku wykresów kolumnowych z materiałami nazwa pakietu google.charts.load to "bar". (To nie literówka: wykres słupkowy materiałów obsługuje obie orientacje). Nazwa klasy wizualizacji to google.charts.Bar. (To nie literówka: wykres słupkowy Material Design obsługuje obie orientacje).

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

  var chart = new google.charts.Bar(container);

Format danych

Każdy wiersz w tabeli odpowiada grupie sąsiednich słupków.

Wiersze: każdy wiersz tabeli odpowiada grupie słupków.

Kolumny:

	Kolumna 0	Kolumna 1	...	Kolumna N
Przeznaczenie:	Etykiety grup na osi X (oddzielne) Wartości na osi X (ciągłe)	Wartości słupka 1 w tej grupie	...	Wartości słupka N w tej grupie
Typ danych:	string (discrete) liczba, data, data, godzina lub pora dnia (ciągły)	Liczba	...	Liczba
Rola:	domena	dane	...	dane
Opcjonalne role kolumn:	adnotacja annotationText	adnotacja annotationText pewność interwał zakres style, etykietka	...	adnotacja annotationText pewność interwał zakres style, etykietka

Opcje konfiguracji

Nazwa
animation.duration	Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba Wartość domyślna: 0
animation.easing	Funkcja wygładzania zastosowana do animacji. Dostępne są te ustawienia: „liniowy” – stała prędkość. „W” – Przyspiesz, zacznij powoli i powoli. „out” – zwolnij – zacznij szybko i spokojnie. 'inAndOut' – przyspieszasz i zwalniasz – zaczynaj powoli, potem przyspiesz, a potem zwolnij. Typ: ciąg znaków Domyślnie: „liniowy”
animation.startup	Określa, czy wykres będzie animowany przy pierwszym rysowaniu. Jeśli parametr ma wartość `true`, wykres rozpocznie się od punktu odniesienia i zostanie animowany do stanu końcowego. Typ: wartość logiczna Domyślnie fałsz
annotations.alwaysOutside	Jeśli ustawiona jest wartość `true`, na wykresach słupkowych i kolumnowych rysuje wszystkie adnotacje poza obszarem słupkowym/kolumnowym. Typ: wartość logiczna Wartość domyślna: fałsz.
annotations.boxStyle	W przypadku wykresów, które obsługują adnotacje, obiekt `annotations.boxStyle` steruje wyglądem pól otaczających adnotacje: var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Ta opcja jest obecnie obsługiwana w przypadku wykresów warstwowych, słupkowych, kolumnowych, mieszanych, liniowych i punktowych. Nie jest on obsługiwany w wykresie adnotacji. Typ: obiekt Wartość domyślna:null
annotations.datum	W przypadku wykresów obsługujących adnotacje obiekt `annotations.datum` umożliwia zastąpienie wybranych z Wykresów Google adnotacji podanych dla poszczególnych elementów danych (np. wartości wyświetlanych wraz z każdym słupkiem na wykresie słupkowym). Kolorem możesz sterować za pomocą parametru `annotations.datum.stem.color`, długością trzonu za pomocą `annotations.datum.stem.length`, a stylem – `annotations.datum.style`. Typ: obiekt Domyślny: kolor to „black”, długość to 12, a styl to „punkt”.
annotations.domain	Na wykresach obsługujących adnotacje obiekt `annotations.domain` pozwala zastąpić wybór z Wykresów Google w przypadku adnotacji wyświetlanych w domenie (główna oś wykresu, np. oś X na typowym wykresie liniowym). Kolorem możesz sterować za pomocą parametru `annotations.domain.stem.color`, długością trzonu za pomocą `annotations.domain.stem.length`, a stylem – `annotations.domain.style`. Typ: obiekt Domyślny: kolor to „black”, długość to 5, styl to „punkt”.
annotations.highContrast	W przypadku wykresów obsługujących adnotacje wartość logiczna `annotations.highContrast` umożliwia zastąpienie wybranego przez Wykresy Google koloru adnotacji. Domyślnie `annotations.highContrast` ma wartość prawda, co sprawia, że na wykresach jest wybierany kolor adnotacji o dobrym kontraście: jasnym kolorem na ciemnym tle i ciemnym na jasnym. Jeśli ustawisz wartość `annotations.highContrast` na fałsz i nie określisz własnego koloru adnotacji, Wykresy Google będą używać domyślnego koloru serii tej adnotacji: Typ: wartość logiczna Wartość domyślna:true (prawda)
annotations.stem	W przypadku wykresów, które obsługują adnotacje, obiekt `annotations.stem` pozwala zastąpić wybrany przez Wykresy Google styl rdzenia. Kolorem możesz sterować za pomocą parametru `annotations.stem.color`, a długością trzonu – `annotations.stem.length`. Pamiętaj, że opcja długości trzonu nie ma wpływu na adnotacje o stylu `'line'`: w przypadku adnotacji punktu odniesienia `'line'` długość trzonu jest zawsze taka sama jak tekst, a w przypadku adnotacji domeny `'line'` rdzenia rozciąga się na cały wykres. Typ: obiekt Domyślny:kolor to „black”, długość to 5 w przypadku adnotacji domeny i 12 w przypadku adnotacji odniesienia.
annotations.style	W przypadku wykresów obsługujących adnotacje opcja `annotations.style` pozwala zastąpić wybrany typ adnotacji przez Wykresy Google. Może to być `'line'` lub `'point'`. Typ: ciąg znaków Domyślnie: „punkt”.
annotations.textStyle	W przypadku wykresów, które obsługują adnotacje, obiekt `annotations.textStyle` kontroluje wygląd tekstu adnotacji: var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Ta opcja jest obecnie obsługiwana w przypadku wykresów warstwowych, słupkowych, kolumnowych, mieszanych, liniowych i punktowych. Nie jest on obsługiwany w wykresie adnotacji . Typ: obiekt Wartość domyślna:null
axisTitlesPosition	Gdzie umieszczać tytuły osi w porównaniu z obszarem wykresu. Obsługiwane wartości: w – narysuj tytuły osi w obszarze wykresu. na zewnątrz – narysuj tytuły osi poza obszarem wykresu. brak – pomija tytuły osi. Typ: ciąg znaków Domyślnie: „out”
backgroundColor	Kolor tła głównego obszaru wykresu. Może to być prosty ciąg znaków koloru HTML, np. `'red'` lub `'#00cc00'`, albo obiekt o następujących właściwościach. Typ: ciąg znaków lub obiekt Domyślnie: „white”
backgroundColor.stroke	Kolor obramowania wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków Domyślnie: „#666”.
backgroundColor.strokeWidth	Szerokość obramowania w pikselach. Typ: liczba Wartość domyślna: 0
backgroundColor.fill	Kolor wypełnienia wykresu jako ciąg znaków HTML koloru. Typ: ciąg znaków Domyślnie: „white”
bar.groupWidth	Szerokość grupy słupków podana w jednym z tych formatów: Piksele (np. 50). Procent dostępnej szerokości dla każdej grupy (np. „20%”), gdzie „100%” oznacza, że między grupami nie ma spacji. Typ: liczba lub ciąg znaków. Domyślny: złoty współczynnik, czyli około „61,8%”.
słupki	Określa, czy słupki na wykresie słupkowym Materiał są pionowe czy poziome. Ta opcja nie ma wpływu na klasyczne wykresy słupkowe ani klasyczne wykresy kolumnowe. Typ: „level” lub „vertical” Domyślnie: „vertical”
chartArea	Obiekt z elementami służącymi do konfigurowania miejsca docelowego i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: liczba lub liczba, po której następuje znak %. Prosta liczba to wartość w pikselach, po której następuje znak %, a po nim wartość procentowa. Przykład: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` Typ: obiekt Wartość domyślna:null
chartArea.backgroundColor	Kolor tła obszaru wykresu. Używany ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielską nazwę koloru. Jeśli używany jest obiekt, można podać te właściwości: `stroke`: kolor podany w postaci ciągu szesnastkowego lub angielskiej nazwy koloru. `strokeWidth`: jeśli jest podany, rysuje obramowanie wokół obszaru wykresu o podanej szerokości (i w kolorze `stroke`). Typ: ciąg znaków lub obiekt Domyślnie: „white”
chartArea.left	Jak daleko od lewej krawędzi należy narysować wykres. Typ: liczba lub ciąg znaków. Domyślnie automatycznie
chartArea.top	Odległość wykresu od górnej krawędzi. Typ: liczba lub ciąg znaków. Domyślnie automatycznie
chartArea.width	Szerokość obszaru wykresu. Typ: liczba lub ciąg znaków. Domyślnie automatycznie
chartArea.height	Wysokość obszaru wykresu. Typ: liczba lub ciąg znaków. Domyślnie automatycznie
chart.subtitle	W przypadku wykresów Material ta opcja określa podtytuł. Napisy są obsługiwane tylko w przypadku list przebojów. Typ: ciąg znaków Wartość domyślna:null
chart.title	W przypadku wykresów Material (materiały) ta opcja określa tytuł. Typ: ciąg znaków Wartość domyślna:null
kolory	Kolory elementów wykresu. Tablica ciągów znaków, w których każdy element jest ciągiem znaków koloru HTML, np. `colors:['red','#004411']`. Typ: tablica ciągów znaków Domyślne:kolory domyślne
dataOpacity	Przezroczystość punktów danych – wartość 1,0 oznacza całkowitą nieprzezroczystość, a wartość 0,0 – pełną przezroczystość. Na wykresach punktowych, histogramach, słupkowych i kolumnowych oznacza to widoczne dane: kropki na wykresie punktowym, a na innych prostokątach – prostokąty. Na wykresach, na których wybór danych powoduje utworzenie kropki (np. na wykresach liniowych i warstwowych), odnosi się ona do okręgów widocznych po najechaniu kursorem lub zaznaczeniu. Wykres mieszany prezentuje oba zachowania i ta opcja nie ma wpływu na inne wykresy. Aby dowiedzieć się, jak zmienić przezroczystość linii trendu, przeczytaj o przezroczystości linii trendu . Typ: liczba Wartość domyślna: 1,0
enableInteractivity	Określa, czy wykres generuje zdarzenia dotyczące użytkowników czy reaguje na interakcję użytkownika. Jeśli ma wartość false (fałsz), wykres nie będzie wywoływać zdarzenia „select” ani innych zdarzeń związanych z interakcją (ale będzie generować zdarzenia gotowe lub zdarzenia błędu) i nie będzie wyświetlać tekstu wyświetlanego po najechaniu kursorem ani w inny sposób zmieniać się w zależności od danych wejściowych użytkownika. Typ: wartość logiczna Wartość domyślna:true (prawda)
explorer	Opcja `explorer` umożliwia użytkownikom przesuwanie i powiększanie wykresów Google. `explorer: {}` działa domyślnie eksploratora, co umożliwia użytkownikom przesuwanie w poziomie i w pionie przez przeciąganie, a także powiększanie i pomniejszanie przez przewijanie. Ta funkcja jest eksperymentalna i może się zmienić w kolejnych wersjach. Uwaga: eksplorator działa tylko z ciągłymi osiami (takimi jak liczby lub daty). Typ: obiekt Wartość domyślna:null
explorer.actions	Eksplorator wykresów Google obsługuje 3 działania: `dragToPan`: przeciągnij, aby przesunąć wykres w pionie i poziomie. Aby przesuwać widok tylko wzdłuż osi poziomej, użyj `explorer: { axis: 'horizontal' }`. Podobnie jest w przypadku osi pionowej. `dragToZoom`: domyślnym działaniem eksploratora jest powiększanie i pomniejszanie, gdy użytkownik przewija stronę. Jeśli używana jest opcja `explorer: { actions: ['dragToZoom', 'rightClickToReset'] }`, przeciąganie prostokątnego obszaru powoduje jego powiększenie. Zalecamy użycie `rightClickToReset` zawsze wtedy, gdy jest używany `dragToZoom`. Informacje o tym, jak dostosować powiększenie, znajdziesz w `explorer.maxZoomIn`, `explorer.maxZoomOut` i `explorer.zoomDelta`. `rightClickToReset`: kliknięcie wykresu prawym przyciskiem myszy powoduje powrót do pierwotnego poziomu przesunięcia i powiększenia. Typ: tablica ciągów znaków Domyślne: ['dragToPan', 'rightClickToReset']
explorer.axis	Domyślnie użytkownicy mogą przesuwać widok w poziomie i w pionie, gdy używana jest opcja `explorer`. Jeśli chcesz, aby użytkownicy mogli przesuwać widok tylko w poziomie, użyj właściwości `explorer: { axis: 'horizontal' }`. Podobnie `explorer: { axis: 'vertical' }` umożliwia przesuwanie tylko w pionie. Typ: ciąg znaków Domyślne: przesuwanie w poziomie i w pionie
explorer.keepInBounds	Domyślnie użytkownicy mogą przesuwać widok dookoła, niezależnie od tego, gdzie znajdują się dane. Aby mieć pewność, że użytkownicy nie będą przesuwali poza oryginalny wykres, użyj funkcji `explorer: { keepInBounds: true }`. Typ: wartość logiczna Wartość domyślna: fałsz.
explorer.maxZoomIn	Wartość maksymalna, którą odkrywca może powiększyć. Domyślnie użytkownicy mogą powiększyć widok na tyle, że zobaczą tylko 25% oryginalnego widoku. Ustawienie `explorer: { maxZoomIn: .5 }` umożliwi użytkownikom powiększenie na tyle duże, aby można było zobaczyć połowę pierwotnego widoku. Typ: liczba Wartość domyślna: 0,25
explorer.maxZoomOut	Wartość maksymalna, którą odkrywca może pomniejszyć. Domyślnie użytkownicy mogą pomniejszyć widok na tyle, że wykres zajmował tylko 1/4 dostępnego miejsca. Ustawienie `explorer: { maxZoomOut: 8 }` umożliwi użytkownikom takie powiększenie, że wykres zajmowałby tylko 1/8 dostępnego miejsca. Typ: liczba Wartość domyślna: 4
explorer.zoomDelta	Gdy użytkownik powiększa lub pomniejsza widok, `explorer.zoomDelta` określa stopień powiększenia. Im mniejsza liczba, tym płynniejsze i wolniejsze powiększenie. Typ: liczba Wartość domyślna: 1,5
focusTarget	Typ elementu, który zostanie zaznaczony po najechaniu kursorem myszy. Wpływa też na to, który element jest wybierany kliknięciem myszy i który element tabeli danych jest powiązany ze zdarzeniami. Może to być: „datum” – skup się na pojedynczym punkcie danych. Odpowiada komórce w tabeli danych. „kategoria” – skup się na grupowaniu wszystkich punktów danych wzdłuż głównej osi. Odpowiada wierszowi w tabeli danych. W polu „category” (kategoria) etykietka pokazuje wszystkie wartości kategorii. Ta opcja może przydać się do porównywania wartości różnych serii. Typ: ciąg znaków Wartość domyślna: „datum”.
fontSize	Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: liczba Domyślne:automatyczne
fontName	Domyślna krój czcionki dla całego tekstu na wykresie. Możesz zastąpić to ustawienie za pomocą właściwości dla konkretnych elementów wykresu. Typ: ciąg znaków Wartość domyślna: „Blogger”
forceIFrame	Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna Wartość domyślna: fałsz.
hAxis	Obiekt z elementami umożliwiającymi konfigurowanie różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ: obiekt Wartość domyślna:null
hAxis.baseline	Punkt odniesienia na osi poziomej. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: liczba Domyślne:automatyczne
hAxis.baselineColor	Kolor punktu odniesienia na osi poziomej. Może to być dowolny ciąg znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: liczba Domyślny: „black”
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
hAxis.format	Ciąg formatowania etykiet osi daty lub liczb. W przypadku etykiet osi liczbowej jest to podzbiór formatowania dziesiętnego Zbiór wzorców ICU . Na przykład `{format:'#,###%'}` wyświetli wartości „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5. Możesz też przesłać: `{format: 'none'}`: wyświetla liczby bez formatowania (np. 8000000) `{format: 'decimal'}`: wyświetla liczby z separatorami tysięcy (np. 8 000 000) `{format: 'scientific'}`: wyświetla liczby w zapisie naukowym (np. 8E6). `{format: 'currency'}`: wyświetla liczby w walucie lokalnej (np. 8 000 000,00) `{format: 'percent'}`: wyświetla liczby jako wartości procentowe (np. 800 000 000%) `{format: 'short'}`: wyświetla skrócone liczby (np. 8 mln) `{format: 'long'}`: wyświetla liczby w postaci pełnych wyrazów (np. 8 mln) W przypadku etykiet osi daty jest to podzbiór formatowania daty zestaw wzorców OIOM . Na przykład `{format:'MMM d, y'}` wyświetli wartość „1 lipca 2011” dla daty pierwszego lipca w 2011 r. Faktyczne formatowanie zastosowane do etykiety jest pobierane z języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku . Przy obliczaniu wartości znaczników i linii siatki branych jest pod uwagę kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii siatki, a te alternatywne zostaną odrzucone, jeśli sformatowane etykiety znacznika będą się powtarzać lub się nakładać. Możesz więc określić `format:"#"`, jeśli chcesz wyświetlać tylko wartości liczb całkowitych, ale pamiętaj, że jeśli żadna alternatywa nie spełnia tego warunku, nie będą wyświetlane żadne linie siatki ani znaczniki. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: ciąg znaków Domyślnie automatycznie
hAxis.gridlines	Obiekt z właściwościami służącymi do konfigurowania linii siatki na osi poziomej. Pamiętaj, że linie siatki na osi poziomej są rysowane w pionie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w następujący sposób: {color: '#333', minSpacing: 20} Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: obiekt Wartość domyślna:null
hAxis.gridlines.color	Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków Domyślnie: „#CCC”.
hAxis.gridlines.count	Przybliżona liczba poziomych linii siatki w obszarze wykresu. Jeśli podasz liczbę dodatnią dla elementu `gridlines.count`, zostanie ona użyta do obliczenia wartości `minSpacing` między liniami siatki. Możesz podać wartość `1`, by narysować tylko jedną linię siatki, lub wartość `0`, by nie rysować linii siatki. Aby automatycznie obliczać liczbę linii siatki na podstawie innych opcji, podaj wartość domyślną –1. Typ: liczba Wartość domyślna: -1
hAxis.gridlines.interval	Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji `gridlines.units.<unit>.interval`, które są używane tylko dla dat i godzin. W przypadku skal liniowych wartość domyślna to `[1, 2, 2.5, 5]`, co oznacza, że wartości linii siatki mogą występować w każdej jednostce (1), w jednostkach parzystych (2) lub wielokrotnościach 2,5 lub 5. Uwzględniana jest też dowolna potęga 10-krotności tych wartości (np. [10, 20, 25, 50] i [,1, 0,2, 0,25, 0,5]). W przypadku skal logicznych wartość domyślna to `[1, 2, 5]`. Typ: liczba od 1 do 10 (bez 10). Wartość domyślna: obliczone.
hAxis.gridlines.minSpacing	Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx. Wartość domyślna głównych linii siatki to `40` dla skal liniowych i `20` dla skal logicznych. Jeśli podasz `count`, a nie `minSpacing`, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast określisz właściwość `minSpacing`, a nie `count`, liczba zostanie obliczona na podstawie parametru minSpacing. Jeśli podasz obie te wartości, `minSpacing` zastąpi. Typ: liczba Wartość domyślna: obliczone.
hAxis.gridlines.multiple	Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana. Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość `gridlines.multiple = 1`, lub wymuszaniem, aby były wielokrotnościami liczby 1000, podając wartość `gridlines.multiple = 1000`. Typ: liczba Wartość domyślna: 1
hAxis.gridlines.units	Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt Wartość domyślna:null
hAxis.minorGridlines	Obiekt z elementami służącymi do konfigurowania podrzędnych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: obiekt Wartość domyślna:null
hAxis.minorGridlines.color	Kolor poziomych mniejszych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków Domyślny: połączenie koloru linii siatki i koloru tła.
hAxis.minorGridlines.count	Opcja `minorGridlines.count` jest w większości wycofana z wyjątkiem wyłączenia podrzędnych linii siatki przez ustawienie liczby na 0. Liczba podrzędnych linii siatki zależy teraz całkowicie od odstępu między głównymi liniami siatki (patrz `hAxis.gridlines.interval`) a minimalną wymaganą ilość miejsca (patrz `hAxis.minorGridlines.minSpacing`). Typ: liczba Wartość domyślna: 1
hAxis.minorGridlines.interval	Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki. Domyślny interwał dla skal liniowych to `[1, 1.5, 2, 2.5, 5]`, a dla skal logicznych to `[1, 2, 5]`. Typ: liczba Wartość domyślna: 1
hAxis.minorGridlines.minSpacing	Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych. Typ: liczba Default (wartość domyślna): obliczone
hAxis.minorGridlines.multiple	Tak samo jak w przypadku głównych `gridlines.multiple`. Typ: liczba Wartość domyślna: 1
hAxis.minorGridlines.units	Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt Wartość domyślna:null
hAxis.logScale	Właściwość `hAxis`, dzięki której oś pozioma jest skalą logarytmiczną (wszystkie wartości muszą być dodatnie). Ustaw wartość „true” (prawda) w przypadku opcji „yes” (tak). Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: wartość logiczna Wartość domyślna: fałsz.
hAxis.scaleType	Właściwość `hAxis`, dzięki której oś pozioma jest skalą logarytmiczną. Użyj jednego z tych rodzajów wartości: null – skalowanie logarytmiczne nie jest wykonywane. „log” – skalowanie logarytmiczne. Wartości ujemne i zerowe nie są przedstawiane na wykresie. Ta opcja jest taka sama jak ustawienie `hAxis: { logscale: true }`. „mirrorLog” – skalowanie logarytmiczne, w którym wyświetlane są wartości ujemne i zerowe. Narysowana wartość liczby ujemnej to ujemny log wartości bezwzględnej. Wartości bliskie 0 są naniesione na skalę liniową. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: ciąg znaków Wartość domyślna: null
hAxis.textPosition	Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków Domyślnie: „out”
hAxis.textStyle	Obiekt określający styl tekstu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
hAxis.ticks	Zastępuje automatycznie wygenerowane znaczniki osi X określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość `v` dla wartości znacznika i opcjonalną właściwość `f` zawierającą ciąg literału, który będzie wyświetlany jako etykieta. Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz `viewWindow.min` lub `viewWindow.max` do zastąpienia. Przykłady: `hAxis: { ticks: [5,10,15,20] }` `hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }` `hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }` `hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }` Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: tablica elementów. Domyślnie automatycznie
hAxis.title	Właściwość `hAxis`, która określa tytuł osi poziomej. Typ: ciąg znaków Wartość domyślna:null
hAxis.titleTextStyle	Obiekt określający styl tekstu tytułu osi poziomej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
hAxis.allowContainerBoundaryTextCutoff	W przypadku wartości false (fałsz) najbardziej zewnętrzne etykiety będą ukryte, zamiast zezwalać na ich przycinanie przez kontener wykresu. Jeśli ma wartość Prawda, przycinanie etykiet jest dozwolone. Ta opcja jest obsługiwana tylko w przypadku osi `discrete`. Typ: wartość logiczna Wartość domyślna: fałsz.
hAxis.slantedText	Jeśli ma wartość prawda, narysuj tekst na osi poziomej pod kątem, aby dopasować większy tekst wzdłuż osi. Jeśli nie, narysuj tekst osi poziomej pionowo. Jeśli tekst jest przechylony pionowo, domyślnie nie zmieści się on w całości. Zwróć uwagę, że ta opcja jest dostępna tylko wtedy, gdy `hAxis.textPosition` ma wartość „out” (czyli wartość domyślną). Domyślna wartość dla dat i godzin to `false`. Typ: wartość logiczna Domyślne:automatyczne
hAxis.slantedTextAngle	Kąt tekstu na osi poziomej (jeśli jest on skośny). Ignorowana, jeśli właściwość `hAxis.slantedText` ma wartość `false` lub jest w trybie automatycznym, a na wykresie ustawiono rysowanie tekstu w poziomie. Jeśli kąt jest dodatni, obrót jest w lewo, a jeśli ujemny – w kierunku zgodnym z ruchem wskazówek zegara. Typ: liczba, -90–90 Wartość domyślna: 30
hAxis.maxAlternation	Maksymalna liczba poziomów tekstu na osi poziomej. Jeśli etykiety tekstowe osi staną się zbyt zatłoczone, serwer może przesuwać sąsiednie etykiety w górę lub w dół, aby je lepiej dopasować. Ta wartość określa największą liczbę używanych poziomów. Serwer może użyć mniejszej liczby poziomów, jeśli etykiety mieszczą się bez nakładania się. Domyślna wartość dla dat i godzin to 1. Typ: liczba Wartość domyślna: 2
hAxis.maxTextLines	Maksymalna dozwolona liczba wierszy w etykietach tekstowych. Etykiety mogą obejmować wiele wierszy, jeśli są za długie, a liczba wierszy jest domyślnie ograniczona wysokością dostępnego miejsca. Typ: liczba Domyślnie automatycznie
hAxis.minTextSpacing	Minimalne odstępy w poziomie (w pikselach) dopuszczalne między 2 przyległymi etykietami tekstowymi. Jeśli etykiety są rozmieszczone zbyt gęsto lub zbyt długie, odstępy mogą spaść poniżej tego progu i w takim przypadku zostanie zastosowany jeden z mechanizmów ułatwiających zachowanie poufności etykiet (na przykład obcięcie etykiet lub usunięcie niektórych z nich). Typ: liczba Domyślna: wartość `hAxis.textStyle.fontSize`.
hAxis.showTextEvery	Liczba etykiet osi poziomej do pokazania, gdzie 1 oznacza każdą etykietę, 2 oznacza, że są widoczne wszystkie pozostałe etykiety itd. Domyślnie wyświetlane jest jak najwięcej etykiet bez nakładania się etykiet. Typ: liczba Domyślne:automatyczne
hAxis.maxValue	Przenosi maksymalną wartość osi poziomej do określonej wartości. Na większości wykresów będzie to zmiana w prawo. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość x danych. `hAxis.viewWindow.max` zastępuje tę właściwość. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: liczba Domyślne:automatyczne
hAxis.minValue	Przenosi wartość minimalną na osi poziomej do określonej wartości. Na większości wykresów będzie ona ustawiona w lewo. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość x danych. `hAxis.viewWindow.min` zastępuje tę właściwość. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: liczba Domyślne:automatyczne
hAxis.viewWindowMode	Określa, jak skalować oś poziomą, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów: „pretty” – przeskaluj wartości w poziomie tak, aby maksymalne i minimalne wartości danych były renderowane trochę wewnątrz lewej i prawej strony obszaru wykresu. W przypadku liczb w oknie viewWindow znajduje się najbliższa większa linia siatki lub najbliższą pomocniczą siatkę dla dat i godzin. „zmaksymalizowane” – przeskaluj wartości w poziomie tak, aby maksymalna i minimalna wartość danych dotykały lewej i prawej strony obszaru wykresu. Spowoduje to zignorowanie pól `haxis.viewWindow.min` i `haxis.viewWindow.max`. „explicit” – wycofana opcja służąca do określania wartości lewej i prawej skali obszaru wykresu. (Wycofano, ponieważ jest nadmiarowy w przypadku atrybutów `haxis.viewWindow.min` i `haxis.viewWindow.max`.) Wartości danych spoza tych wartości zostaną przycięte. Musisz określić obiekt `hAxis.viewWindow` opisujący maksymalne i minimalne wartości do wyświetlenia. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: ciąg znaków Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają `haxis.viewWindow.min` i `haxis.viewWindow.max`.
hAxis.viewWindow	Określa zakres przycięcia osi poziomej. Typ: obiekt Wartość domyślna:null
hAxis.viewWindow.max	W przypadku osi `continuous` : Maksymalna wartość danych poziomych do renderowania. W przypadku osi `discrete`: Indeks wiersza liczony od zera, na którym kończy się okno przycinania. Punkty danych w tym indeksie i wyższych, zostaną przycięte. W połączeniu z funkcją `vAxis.viewWindowMode.min` definiuje półotwarty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Inaczej mówiąc, będzie wyświetlany każdy indeks `min <= index < max`. Ignorowana, gdy atrybut `hAxis.viewWindowMode` ma wartość „ładny” lub „zmaksymalizowany”. Typ: liczba Domyślnie automatycznie
hAxis.viewWindow.min	W przypadku osi `continuous`: Minimalna wartość danych poziomych do renderowania. W przypadku osi `discrete`: Indeks wiersza liczony od zera, od którego zaczyna się okno przycinania. Punkty danych w indeksach niższych niż ten zostaną przycięte. W połączeniu z funkcją `vAxis.viewWindowMode.max` definiuje półotwarty zakres [min, max], który wskazuje indeksy elementów do wyświetlenia. Inaczej mówiąc, będzie wyświetlany każdy indeks równy `min <= index < max`. Ignorowana, gdy atrybut `hAxis.viewWindowMode` ma wartość „ładny” lub „zmaksymalizowany”. Typ: liczba Domyślnie automatycznie
wysokość	Wysokość wykresu w pikselach. Typ: liczba Domyślna: wysokość elementu nadrzędnego.
isStacked	Jeśli ma wartość Prawda, umieszcza elementy wszystkich serii przy każdej wartości domeny. Uwaga: na wykresach kolumnowych, obszarowych i SteppedArea Wykresy Google odwracają kolejność elementów legendy, by lepiej pasowały do ułożenia elementów serii (np. seria 0 będzie skrajnie skrajnie legendą). To nie dotyczy wykresów słupkowych. Opcja `isStacked` obsługuje też 100% stosów, w ramach których stos elementów przy poszczególnych wartościach domeny jest przeskalowywany w taki sposób, by sumować się do 100%. Opcje `isStacked` to: `false` – elementy nie będą się nakładać. Jest to opcja domyślna. `true` – gromadzi elementy wszystkich serii przy każdej wartości domeny. `'percent'` – skumuluje elementy wszystkich serii przy każdej wartości domeny i przeskaluje je tak, by sumowały się do 100%. Wartość każdego elementu jest obliczana jako procent 100%. `'relative'` – skumuluje elementy wszystkich serii przy każdej wartości domeny i przeskalowuje je w taki sposób, by uzyskać sumę 1. Wartość każdego elementu jest obliczana jako ułamek 1. `'absolute'` – działa tak samo jak `isStacked: true`. Przy 100% stosów obliczona wartość każdego elementu pojawi się na etykietce po jego rzeczywistej wartości. Na osi docelowej domyślnie pojawią się wartości zaznaczenia na podstawie względnej skali 0–1 jako ułamków 1 dla `'relative'` i od 0 do 100% dla `'percent'` (Uwaga: jeśli korzystasz z opcji `'percent'`, wartości osi i znaczników są wyświetlane jako wartości procentowe, jednak rzeczywiste wartości są względnymi wartościami ze skali 0–1. Dzieje się tak, ponieważ skoki na osi procentowej są wynikiem zastosowania formatu „#.##%” do względnych wartości skali od 0 do 1. Jeśli używasz `isStacked: 'percent'`, pamiętaj, by znaczniki lub linie siatki określać za pomocą względnych wartości skali od 0 do 1. Możesz dostosować wartości linii siatki i znaczniki oraz formatowanie za pomocą odpowiednich opcji `hAxis/vAxis`. Grupowanie 100% obsługuje tylko wartości danych typu `number`. Wartość bazowa musi wynosić 0. Typ: wartość logiczna/ciąg Wartość domyślna: fałsz.
legenda	Obiekt z członkami służącymi do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt Wartość domyślna:null
legend.pageIndex	Początkowo wybrany indeks stron legendy liczony od zera. Typ: liczba Wartość domyślna: 0
legend.position	Pozycja legendy. Użyj jednego z tych rodzajów wartości: „bottom” – pod wykresem. „po lewej” – po lewej stronie wykresu nie jest powiązana żadna seria. Jeśli chcesz, by legenda znajdowała się po lewej stronie, użyj opcji `targetAxisIndex: 1`. „w” – wewnątrz wykresu w lewym górnym rogu wykresu. „brak” – nie jest wyświetlana żadna legenda. „w prawo” – z prawej strony wykresu. Niezgodne z opcją `vAxes`. „góra” – nad wykresem. Typ: ciąg znaków Domyślnie: „right”
legend.alignment	Wyrównanie legendy. Użyj jednego z tych rodzajów wartości: „start” – wyrównane do początku obszaru przydzielonego do legendy. „center” (centrum) – wyśrodkowany w obszarze przydzielonego dla legendy. „end” – wyrównane do końca obszaru przydzielonego do legendy. Początek, środek i koniec odnoszą się do stylu (pionowego lub poziomego) legendy. Na przykład w legendzie „po prawej” punkty „początek” i „koniec” znajdują się odpowiednio na górze i na dole. W legendzie „góra” wartości „początek” i „koniec” znajdują się odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. Domyślna wartość w legendach „bottom” to „center”, a w innych – „start”. Typ: ciąg znaków Domyślne:automatyczne
legend.textStyle	Obiekt określający styl tekstu legendy. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
orientacja	Orientacja wykresu. Ustawienie wartości `'vertical'` powoduje obracanie osie wykresu w taki sposób, że wykres kolumnowy (np.) zmienia się w wykres słupkowy, a wykres warstwowy rozwija się w prawo zamiast w górę: Typ: ciąg znaków Domyślnie: „poziomo”
reverseCategories	Jeśli zasada ma wartość Prawda, seria jest rysowana od prawej do lewej. Domyślnie rysowanie od lewej do prawej. Ta opcja jest obsługiwana tylko w przypadku osi `discrete` `major`. Typ: wartość logiczna Wartość domyślna: fałsz.
seria	Tablica obiektów, z których każdy opisuje format odpowiedniej serii na wykresie. Aby użyć wartości domyślnych dla serii, podaj pusty obiekt {}. Jeśli nie określono serii lub wartości, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości: `annotations` – obiekt, który będzie stosowany do adnotacji dotyczących serii. Pozwala to na przykład kontrolować `textStyle` serii: series: { 0: { annotations: { textStyle: {fontSize: 12, color: 'red' } } } } Pełną listę opcji, które można dostosować, znajdziesz w opisie różnych opcji `annotations`. `color` – kolor, który będzie używany w tej serii. Podaj prawidłowy ciąg znaków HTML koloru. `targetAxisIndex` – do której osi chcesz przypisać tę serię, gdzie 0 to oś domyślna, a 1 – oś przeciwna. Wartość domyślna to 0. Wartość 1 określa wykres, na którym różne serie są renderowane na różnych osiach. Do osi domyślnej zostanie przydzielona co najmniej 1 seria. Możesz zdefiniować inną skalę dla różnych osi. `visibleInLegend` – wartość logiczna, gdzie „true” oznacza, że seria powinna mieć pozycję legendy, a fałsz, że nie powinna. Wartość domyślna to true (prawda). Możesz podać tablicę obiektów, z których każdy odnosi się do serii w podanej kolejności, albo określić obiekt, w którym każdy element podrzędny ma klucz numeryczny wskazujący, do której serii ma zastosowanie. Na przykład dwie poniższe deklaracje są identyczne. Pierwsza seria jest zadeklarowana jako czarna i nie ma jej w legendzie, a czwarta – jako czerwona i nie ma jej w legendzie: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami Wartość domyślna: {}
motyw	Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współpracują ze sobą, aby uzyskać określony sposób działania wykresu lub efektu wizualnego. Obecnie dostępny jest tylko 1 motyw: „zmaksymalizowany” – maksymalizuje obszar wykresu oraz rysuje legendę i wszystkie etykiety wewnątrz obszaru wykresu. Ustawia te opcje: chartArea: {width: '100%', height: '100%'}, legend: {position: 'in'}, titlePosition: 'in', axisTitlesPosition: 'in', hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'} Typ: ciąg znaków Wartość domyślna:null
tytuł	Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków Domyślnie bez tytułu.
titlePosition	Gdzie umieścić tytuł wykresu w porównaniu do obszaru wykresu. Obsługiwane wartości: w – narysuj tytuł w obszarze wykresu. na zewnątrz – narysuj tytuł poza obszarem wykresu. none – pomija tytuł. Typ: ciąg znaków Domyślnie: „out”
titleTextStyle	Obiekt, który określa styl tekstu tytułu. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
etykietka	Obiekt z elementami służącymi do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt Wartość domyślna:null
tooltip.ignoreBounds	Jeśli ustawisz wartość `true`, rysowanie etykietek będzie poza granicami wykresu ze wszystkich stron. Uwaga: dotyczy to tylko etykiet HTML. Jeśli ta opcja jest włączona w etykietkach SVG, wszystkie nadmiarowe elementy poza granicami wykresu zostaną przycięte. Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Typ: wartość logiczna Wartość domyślna: fałsz.
tooltip.isHtml	Jeśli ma wartość Prawda, używaj etykietek renderowanych HTML (a nie renderowanych w formacie SVG). Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna Wartość domyślna: fałsz.
tooltip.showColorCode	Jeśli ma wartość prawda, obok informacji o serii na etykietce wyświetlaj kolorowe kwadraty. Wartość domyślna to true, gdy `focusTarget` ma wartość „category”. W przeciwnym razie wartość domyślna to false (fałsz). Typ: wartość logiczna Domyślne:automatyczne
tooltip.textStyle	Obiekt, który określa styl tekstu etykietki. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
tooltip.trigger	Interakcja użytkownika, która powoduje wyświetlenie etykietki: „fokus” – etykietka jest wyświetlana po najechaniu przez użytkownika kursorem na element. „none” (brak) – etykietka nie będzie wyświetlana. „wybór” – etykietka zostanie wyświetlona, gdy użytkownik wybierze element. Typ: ciąg znaków Domyślnie: „fokus”
linie trendu	Wyświetla linie trendu na wykresach, które je obsługują. Domyślnie używane są liniowe linie trendu, ale można to dostosować za pomocą opcji `trendlines.n.type`. Linie trendów są określane dla poszczególnych serii, więc najczęściej Twoje opcje będą wyglądać tak: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Typ: obiekt Wartość domyślna:null
trendlines.n.color	Kolor linii trendu wyrażony jako angielska nazwa koloru lub ciąg szesnastkowy. Typ: ciąg znaków Domyślny:domyślny kolor serii.
trendlines.n.degree	W przypadku linii trendu wartości `type: 'polynomial'` jest to stopień wielomianu (`2` dla kwadratu, `3` dla sześciennego itd.). (W następnej wersji Wykresów Google domyślny stopień może się zmienić z 3 na 2). Typ: liczba Wartość domyślna: 3
trendlines.n.labelInLegend	Jeśli jest ustawiona, linia trendu pojawi się w legendzie jako ten ciąg znaków. Typ: ciąg znaków Wartość domyślna:null
trendlines.n.lineWidth	Szerokość linii linii trendu w pikselach. Typ: liczba Wartość domyślna: 2
trendlines.n.opacity	Przezroczystość linii trendu w zakresie od 0,0 (przezroczysta) do 1,0 (nieprzezroczysta). Typ: liczba Wartość domyślna: 1,0
trendlines.n.pointSize	Linie trendów tworzy się przez wciśnięcie wielu kropek na wykresie. Ta rzadko używana opcja pozwala dostosować rozmiar kropek. Zwykle preferowana będzie opcja `lineWidth` linii trendu. Jest ona jednak potrzebna, jeśli używasz globalnej opcji `pointSize` i chcesz ustawić inną wielkość punktu w linii trendu. Typ: liczba Wartość domyślna: 1
trendlines.n.pointsVisible	Linie trendów są tworzone przez przypięcie kilku kropek na wykresie. Opcja `pointsVisible` linii trendu określa, czy punkty na danej linii trendu są widoczne. Typ: wartość logiczna Wartość domyślna:true (prawda)
trendlines.n.showR2	Określa, czy współczynnik determinacji ma być wyświetlany w legendzie lub na etykietce linii trendu. Typ: wartość logiczna Wartość domyślna: fałsz.
trendlines.n.type	Określa, czy linie trendu to `'linear'` (domyślna), `'exponential'` lub `'polynomial'`. Typ: ciąg znaków Domyślnie: liniowy
trendlines.n.visibleInLegend	Określa, czy równanie linii trendu pojawia się w legendzie. (pojawi się na etykietce linii trendu). Typ: wartość logiczna Wartość domyślna: fałsz.
vAxes	Określa właściwości poszczególnych osi pionowych, jeśli wykres ma wiele osi pionowych. Każdy obiekt podrzędny jest obiektem `vAxis` i może zawierać wszystkie właściwości obsługiwane przez funkcję `vAxis`. Te wartości właściwości zastępują wszystkie ustawienia globalne danej usługi. Aby określić wykres z wieloma osiami pionowymi, najpierw zdefiniuj nową oś za pomocą funkcji `series.targetAxisIndex`, a potem skonfiguruj ją za pomocą funkcji `vAxes`. Ten przykład przypisze serię 2 do prawej osi i określa niestandardowy tytuł i styl tekstu: { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } } Ta właściwość może być obiektem lub tablicą. Obiekt to zbiór obiektów, z których każda ma etykietę liczbową określającą definiowaną oś – jest to format pokazany powyżej. Tablica to tablica obiektów, po jednym na oś. Na przykład ten zapis formatu tablicy jest identyczny z pokazanym powyżej obiektem `vAxis`: vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Typ: tablica obiektów lub obiektów podrzędnych Wartość domyślna:null
vAxis	Obiekt ze elementami służącymi do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ: obiekt Wartość domyślna:null
vAxis.baseline	Właściwość `vAxis`, która określa punkt odniesienia dla osi pionowej. Jeśli punkt odniesienia jest większy niż najwyższa linia siatki lub mniejsza niż najniższa linia siatki, zostanie zaokrąglona do najbliższej linii siatki. Typ: liczba Domyślne:automatyczne
vAxis.baselineColor	Określa kolor punktu odniesienia na osi pionowej. Może to być dowolny ciąg znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Typ: liczba Domyślny: „black”
vAxis.direction	Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się na dole wykresu. Określ `-1`, aby odwrócić kolejność wartości. Typ: 1 lub -1 Wartość domyślna: 1
vAxis.format	Ciąg formatowania etykiet osi liczbowej. To jest podzbiór zestawu wzorców OIOM . Na przykład `{format:'#,###%'}` wyświetli wartości „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5. Możesz też przesłać: `{format: 'none'}`: wyświetla liczby bez formatowania (np. 8000000) `{format: 'decimal'}`: wyświetla liczby z separatorami tysięcy (np. 8 000 000) `{format: 'scientific'}`: wyświetla liczby w zapisie naukowym (np. 8E6). `{format: 'currency'}`: wyświetla liczby w walucie lokalnej (np. 8 000 000,00) `{format: 'percent'}`: wyświetla liczby jako wartości procentowe (np. 800 000 000%) `{format: 'short'}`: wyświetla skrócone liczby (np. 8 mln) `{format: 'long'}`: wyświetla liczby w postaci pełnych wyrazów (np. 8 mln) Faktyczne formatowanie zastosowane do etykiety jest pobierane z języka, w którym załadowano interfejs API. Więcej informacji znajdziesz w artykule o wczytywaniu wykresów w określonym języku . Przy obliczaniu wartości znaczników i linii siatki branych jest pod uwagę kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii siatki, a te alternatywne zostaną odrzucone, jeśli sformatowane etykiety znacznika będą się powtarzać lub się nakładać. Możesz więc określić `format:"#"`, jeśli chcesz wyświetlać tylko wartości liczb całkowitych, ale pamiętaj, że jeśli żadna alternatywa nie spełnia tego warunku, nie będą wyświetlane żadne linie siatki ani znaczniki. Typ: ciąg znaków Domyślnie automatycznie
vAxis.gridlines	Obiekt ze elementami służącymi do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki na osi pionowej są rysowane poziomo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: {color: '#333', minSpacing: 20} Typ: obiekt Wartość domyślna:null
vAxis.gridlines.color	Kolor pionowych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków Domyślnie: „#CCC”.
vAxis.gridlines.count	Przybliżona liczba poziomych linii siatki w obszarze wykresu. Jeśli podasz liczbę dodatnią dla elementu `gridlines.count`, zostanie ona użyta do obliczenia wartości `minSpacing` między liniami siatki. Możesz podać wartość `1`, by narysować tylko jedną linię siatki, lub wartość `0`, by nie rysować linii siatki. Aby automatycznie obliczać liczbę linii siatki na podstawie innych opcji, podaj wartość domyślną –1. Typ: liczba Wartość domyślna: -1
vAxis.gridlines.interval	Tablica rozmiarów (jako wartości danych, a nie pikseli) między sąsiednimi liniami siatki. Ta opcja jest obecnie dostępna tylko w przypadku osi liczbowych, ale jest ona podobna do opcji `gridlines.units.<unit>.interval`, które są używane tylko dla dat i godzin. W przypadku skal liniowych wartość domyślna to `[1, 2, 2.5, 5]`, co oznacza, że wartości linii siatki mogą występować w każdej jednostce (1), w jednostkach parzystych (2) lub wielokrotnościach 2,5 lub 5. Uwzględniana jest też dowolna potęga 10-krotności tych wartości (np. [10, 20, 25, 50] i [,1, 0,2, 0,25, 0,5]). W przypadku skal logicznych wartość domyślna to `[1, 2, 5]`. Typ: liczba od 1 do 10 (bez 10). Wartość domyślna: obliczone.
vAxis.gridlines.minSpacing	Minimalna przestrzeń ekranu (w pikselach) między głównymi liniami siatki na osi HAx. Wartość domyślna głównych linii siatki to `40` dla skal liniowych i `20` dla skal logicznych. Jeśli podasz `count`, a nie `minSpacing`, wartość minSpacing jest obliczana na podstawie liczby. Jeśli natomiast określisz właściwość `minSpacing`, a nie `count`, liczba zostanie obliczona na podstawie parametru minSpacing. Jeśli podasz obie te wartości, `minSpacing` zastąpi. Typ: liczba Wartość domyślna: obliczone.
vAxis.gridlines.multiple	Wszystkie wartości linii siatki i znaczników muszą być wielokrotnościami wartości tej opcji. Pamiętaj, że w przeciwieństwie do interwałów potęga dziesięciokrotnej wielokrotności nie jest uwzględniana. Możesz więc wymuszać, aby znaczniki były liczbami całkowitymi, określając wartość `gridlines.multiple = 1`, lub wymuszaniem, aby były wielokrotnościami liczby 1000, podając wartość `gridlines.multiple = 1000`. Typ: liczba Wartość domyślna: 1
vAxis.gridlines.units	Zastępuje domyślny format różnych aspektów typów danych daty, daty, godziny i godziny, gdy są używane z liniami siatki obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]}, hours: {format: [/format strings here/]}, minutes: {format: [/format strings here/]}, seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]} } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt Wartość domyślna:null
vAxis.minorGridlines	Obiekt z elementami umożliwiającymi konfigurowanie podrzędnych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines. Typ: obiekt Wartość domyślna:null
vAxis.minorGridlines.color	Kolor pionowych podrzędnych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg znaków HTML koloru. Typ: ciąg znaków Domyślny: połączenie koloru linii siatki i koloru tła.
vAxis.minorGridlines.count	Opcja MinGridlines.count jest obecnie głównie wycofywana. Wyjątkiem jest wyłączanie podrzędnych linii siatki przez ustawienie wartości licznika na 0. Liczba mniejszych linii siatki zależy od odstępu między głównymi liniami siatki (patrz: vAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (patrz vAxis.minorGridlines.minSpacing). Typ: liczba Wartość domyślna: 1
vAxis.minorGridlines.interval	Opcja MinGridlines.interval jest podobna do opcji interwału większych linii siatki, ale wybrany przedział będzie zawsze równy dzielnikowi większej linii siatki. Domyślny interwał dla skal liniowych to `[1, 1.5, 2, 2.5, 5]`, a dla skal logicznych to `[1, 2, 5]`. Typ: liczba Wartość domyślna: 1
vAxis.minorGridlines.minSpacing	Minimalna wymagana ilość miejsca (w pikselach) między sąsiednimi mniejszymi liniami siatki oraz między mniejszymi i głównymi liniami siatki. Wartość domyślna to 1/2 minSpacing głównych linii siatki dla skal liniowych i 1/5 minSpacing dla skal logicznych. Typ: liczba Default (wartość domyślna): obliczone
vAxis.minorGridlines.multiple	Tak samo jak w przypadku głównych `gridlines.multiple`. Typ: liczba Wartość domyślna: 1
vAxis.minorGridlines.units	Zastępuje domyślny format różnych aspektów danych typu data, godzina i godzina w przypadku używania z wykresami podrzędnymi obliczonymi na wykresie. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/format strings here/]}, months: {format: [/format strings here/]}, days: {format: [/format strings here/]} hours: {format: [/format strings here/]} minutes: {format: [/format strings here/]} seconds: {format: [/format strings here/]}, milliseconds: {format: [/format strings here/]}, } } Więcej informacji znajdziesz w sekcji Daty i godziny. Typ: obiekt Wartość domyślna:null
vAxis.logScale	Jeśli ma wartość prawda, oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie. Typ: wartość logiczna Wartość domyślna: fałsz.
vAxis.scaleType	Właściwość `vAxis`, dzięki której oś pionowa jest skalą logarytmiczną. Użyj jednego z tych rodzajów wartości: null – skalowanie logarytmiczne nie jest wykonywane. „log” – skalowanie logarytmiczne. Wartości ujemne i zerowe nie są przedstawiane na wykresie. Ta opcja jest taka sama jak ustawienie `vAxis: { logscale: true }`. „mirrorLog” – skalowanie logarytmiczne, w którym wyświetlane są wartości ujemne i zerowe. Narysowana wartość liczby ujemnej to ujemny log wartości bezwzględnej. Wartości bliskie 0 są naniesione na skalę liniową. Ta opcja jest obsługiwana tylko w przypadku osi `continuous`. Typ: ciąg znaków Wartość domyślna:null
vAxis.textPosition	Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków Domyślnie: „out”
vAxis.textStyle	Obiekt określający styl tekstu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
vAxis.ticks	Zastępuje automatycznie wygenerowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczba, data, data i godzina lub godzina) albo obiektem. Jeśli jest to obiekt, powinien mieć właściwość `v` dla wartości znacznika i opcjonalną właściwość `f` zawierającą ciąg literału, który będzie wyświetlany jako etykieta. Pole viewWindow zostanie automatycznie rozwinięte i będzie zawierać minimalną i maksymalną liczbę taktów, chyba że określisz `viewWindow.min` lub `viewWindow.max` do zastąpienia. Przykłady: `vAxis: { ticks: [5,10,15,20] }` `vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }` `vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }` `vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }` Typ: tablica elementów. Domyślnie automatycznie
vAxis.title	Właściwość `vAxis`, która określa tytuł osi pionowej. Typ: ciąg znaków Domyślnie bez tytułu.
vAxis.titleTextStyle	Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma ten format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } `color` może być dowolnym ciągiem znaków HTML koloru, na przykład `'red'` lub `'#00cc00'`. Zobacz też `fontName` i `fontSize`. Typ: obiekt Domyślnie: `{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}`
vAxis.maxValue	Przenosi maksymalną wartość osi pionowej do określonej wartości. Na większości wykresów wartość ta będzie wyższa. Ignorowana, jeśli ustawiona jest wartość mniejsza niż maksymalna wartość „y” danych. `vAxis.viewWindow.max` zastępuje tę właściwość. Typ: liczba Domyślne:automatyczne
vAxis.minValue	Przenosi minimalną wartość osi pionowej do określonej wartości. Na większości wykresów będzie to zmiana w dół. Ignorowana, jeśli ustawiona jest wartość większa niż minimalna wartość y danych. `vAxis.viewWindow.min` zastępuje tę właściwość. Typ: liczba Wartość domyślna:null
vAxis.viewWindowMode	Określa, jak skalować oś pionową, by renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów: „pretty” – przeskaluj wartości pionowe tak, by maksymalne i minimalne wartości danych były renderowane trochę wewnątrz i na górze obszaru wykresu. W przypadku liczb w oknie viewWindow znajduje się najbliższa większa linia siatki lub najbliższą pomocniczą siatkę dla dat i godzin. „zmaksymalizowane” – przeskaluj wartości pionowe, tak aby maksymalna i minimalna wartość danych dotykały górnej i dolnej części obszaru wykresu. Spowoduje to zignorowanie pól `vaxis.viewWindow.min` i `vaxis.viewWindow.max`. „explicit” – wycofana opcja służąca do określania górnej i dolnej skali obszaru wykresu. (Wycofano, ponieważ jest nadmiarowy w atrybutach `vaxis.viewWindow.min` i `vaxis.viewWindow.max`. Wartości danych spoza tych wartości zostaną przycięte. Musisz określić obiekt `vAxis.viewWindow` opisujący maksymalne i minimalne wartości do wyświetlenia. Typ: ciąg znaków Domyślnie: odpowiednik „ładne”. Jednak jeśli są używane, pierwszeństwo mają `vaxis.viewWindow.min` i `vaxis.viewWindow.max`.
vAxis.viewWindow	Określa zakres przycięcia osi pionowej. Typ: obiekt Wartość domyślna:null
vAxis.viewWindow.max	Maksymalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut `vAxis.viewWindowMode` ma wartość „ładny” lub „zmaksymalizowany”. Typ: liczba Domyślnie automatycznie
vAxis.viewWindow.min	Minimalna wartość danych pionowych do renderowania. Ignorowana, gdy atrybut `vAxis.viewWindowMode` ma wartość „ładny” lub „zmaksymalizowany”. Typ: liczba Domyślnie automatycznie
szerokość	Szerokość wykresu w pikselach. Typ: liczba Domyślna: szerokość elementu nadrzędnego.

Metody

Metoda
`draw(data, options)`	Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia `ready`. `Extended description`. Return Type: brak
`getAction(actionID)`	Zwraca obiekt działania etykietki z żądanym obiektem `actionID`. Return Type: (Typ zwracania): obiekt
`getBoundingBox(id)`	Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu `id`. Format zapisu `id` nie jest jeszcze udokumentowany (są to wartości zwracane przez moduły obsługi zdarzeń), ale oto kilka przykładów: `var cli = chart.getChartLayoutInterface();` Wysokość obszaru wykresu `cli.getBoundingBox('chartarea').height` Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego `cli.getBoundingBox('bar#0#2').width` Ramka ograniczająca piątej podkładki na wykresie kołowym `cli.getBoundingBox('slice#4')` Ramka ograniczająca dane wykresu pionowego (np. kolumnowego): `cli.getBoundingBox('vAxis#0#gridline')` Ramka ograniczająca dane wykresu poziomego (np. słupkowego): `cli.getBoundingBox('hAxis#0#gridline')` Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
`getChartAreaBoundingBox()`	Zwraca obiekt zawierający lewo, górę, szerokość i wysokość zawartości wykresu (tj. bez etykiet i legendy): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
`getChartLayoutInterface()`	Zwraca obiekt zawierający informacje o pozycji na ekranie wykresu i jego elementów. W przypadku zwróconego obiektu można wywołać te metody: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwracania): obiekt
`getHAxisValue(xPosition, optional_axis_index)`	Zwraca poziomą wartość danych w punkcie `xPosition`, czyli odsunięcie od lewej krawędzi kontenera wykresu w pikselach. Może być ujemna. Przykład: `chart.getChartLayoutInterface().getHAxisValue(400)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`getImageURI()`	Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Zobacz Drukowanie wykresów PNG. Return Type: (Typ zwracania): ciąg znaków
`getSelection()`	Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Słupek odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null). Na tym wykresie w danym momencie można wybrać tylko 1 element. `Extended description` Return Type: tablica elementów zaznaczenia.
`getVAxisValue(yPosition, optional_axis_index)`	Zwraca pionową wartość danych przy `yPosition`, czyli przesunięcie w pikselach od górnej krawędzi kontenera wykresu. Może być ujemna. Przykład: `chart.getChartLayoutInterface().getVAxisValue(300)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`getXLocation(dataValue, optional_axis_index)`	Zwraca współrzędną X piksela dla elementu `dataValue` względem lewej krawędzi kontenera wykresu. Przykład: `chart.getChartLayoutInterface().getXLocation(400)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`getYLocation(dataValue, optional_axis_index)`	Zwraca współrzędną Y piksela (`dataValue`) względem górnej krawędzi kontenera wykresu. Przykład: `chart.getChartLayoutInterface().getYLocation(300)`. Wywołuj je po narysowaniu wykresu. Return Type: (Typ zwrotu): liczba
`removeAction(actionID)`	Usuwa z wykresu działanie etykietki z żądanym elementem `actionID`. Typ zwrotu: `none`
`setAction(action)`	Ustawia działanie etykietki, które ma być wykonywane po kliknięciu tekstu działania przez użytkownika. Metoda `setAction` przyjmuje obiekt jako parametr działania. Ten obiekt powinien określać 3 właściwości: `id` – identyfikator ustawianego działania, `text` – tekst, który powinien być widoczny w etykietce działania, oraz `action` – funkcję, która powinna zostać uruchomiona po kliknięciu tekstu działania przez użytkownika. Przed wywołaniem metody `draw()` wykresu należy ustawić wszystkie działania związane z etykietką. Rozszerzony opis Typ zwrotu: `none`
`setSelection()`	Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Słupek odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null). Na tym wykresie można wybrać tylko 1 element naraz. `Extended description` Return Type: brak
`clearChart()`	Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak

Zdarzenia

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

Nazwa
`animationfinish`	Uruchamiane po zakończeniu animacji przejścia. Właściwości: brak
`click`	Uruchamiane, gdy użytkownik kliknie wykres. Pozwala określić, kiedy klikane są tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
`error`	Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd. Właściwości: identyfikator, komunikat
`legendpagination`	Uruchamiane, gdy użytkownik kliknie strzałki podziału na strony w legendzie. Zwraca bieżący indeks stron legendy liczony od zera oraz łączną liczbę stron. Właściwości: currentPageIndex, totalPages
`onmouseover`	Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
`onmouseout`	Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna
`ready`	Wykres jest gotowy do obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody `draw` i wywołaj je dopiero po wywołaniu zdarzenia. Właściwości: brak
`select`	Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer `getSelection()`. Właściwości: brak

Zasady dotyczące danych

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