Wizualizacja: wykres punktowy

Omówienie

Wykresy punktowe przedstawiają punkty na wykresie. Gdy użytkownik najedzie na punkty, pojawi się etykietka z dodatkowymi informacjami.

Wykresy punktowe Google są renderowane w przeglądarce za pomocą SVG lub VML w zależności od jej możliwości.

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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

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

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

Zmienianie i animowanie kształtów

Domyślnie wykresy punktowe przedstawiają elementy zbioru danych za pomocą okręgów. Za pomocą opcji pointShape można określić inne kształty, opisane w dokumentacji Dostosowywanie punktów.

Podobnie jak w przypadku większości wykresów Google, możesz je animować za pomocą zdarzeń. Możesz dodać odbiornik dla pierwszego zdarzenia ready, a potem ponownie narysować wykres po wprowadzeniu odpowiednich zmian. Po pierwszym zdarzeniu ready możesz nasłuchiwać zdarzenia animationfinish, aby powtórzyć proces. Zapewni to ciągłą animację. Opcja animation określa sposób ponownego renderowania: natychmiast (bez animacji) czy płynnie, a także, czy płynnie i z jakim działaniem.

Dobre części
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
Pełny kod HTML
<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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Tworzenie wykresów rozproszonych po materiałach

W 2014 roku ogłosiliśmy 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 to Material Design. Udostępnimy „Material” wersje wszystkich naszych głównych wykresów. Możesz z nich korzystać, jeśli podoba Ci się ich wygląd.

Tworzenie wykresu rozproszonego materiału wygląda podobnie do tworzenia obecnie nazywanego „klasycznym” wykresem rozproszonym. Wczytujesz interfejs GoogleVisual API (mimo że z pakietem 'scatter' zamiast z pakietem 'corechart'), definiujesz swoją tabelę danych, a następnie tworzysz obiekt (ale klasę google.charts.Scatter zamiast google.visualization.ScatterChart).

Uwaga: Wykresy Material Design nie działają w starszych wersjach Internet Explorera. (IE8 i wcześniejsze wersje nie obsługują plików SVG, których wymagają Material Wykresy).

Wykresy punktowe Material Design mają wiele ulepszeń w porównaniu z klasycznymi wykresami punktowymi, w tym zmienną przezroczystości, która zwiększa czytelność nakładających się punktów, ulepszoną paletę kolorów, bardziej przejrzyste formatowanie etykiet, węższe odstępy domyślne, słabsze linie siatki i tytuły (oraz dodanie napisów). 

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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, więc jeśli korzystasz z którejś z opcji klasycznych, musisz przekonwertować je na opcje materiału, zastępując ten wiersz:

chart.draw(data, options);

...na tym:

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

Wykresy Dual-Y

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

Zwróć uwagę, że nasze 2 osie Y mają różne oznaczenia („Ocena końcowa egzaminu” i „Godziny nauki”), a 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órą oś użyć w przypadku każdej z nich ('final grade' i 'hours studied'; nie muszą one mieć żadnego związku z nazwami kolumn w tabeli danych). Opcja axes powoduje przekształcenie tego wykresu w wykres 2-Y, którego oś 'Final Exam Grade' znajduje się po lewej stronie, a oś 'Hours Studied' po prawej. 

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

      function drawStuff() {

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

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

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

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

        drawMaterialChart();
    };

Listy przebojów X

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

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

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

Wczytuję

Nazwa pakietu google.charts.load to "corechart", a nazwa klasy wizualizacji to google.visualization.ScatterChart. 

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

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

W przypadku wykresów punktowych Material Design nazwa pakietu google.charts.load to "scatter", a nazwa klasy wizualizacji to google.charts.Scatter. 

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

  var visualization = new google.charts.Scatter(container);

Format danych

Wiersze: każdy wiersz tabeli reprezentuje zbiór punktów danych z tą samą wartością na osi X.

Kolumny:

  Kolumna 0 Kolumna 1 ... Kolumna N
Przeznaczenie: Wartości punktu danych na osi X Wartości Y serii 1 ... Wartości Y serii N
Typ danych: ciąg znaków, liczba lub data/data, godzina/godzina ciąg znaków, liczba lub data/data, godzina/godzina ... ciąg znaków, liczba lub data/data, godzina/godzina
Rola: dane dane ... dane
Opcjonalne role kolumn:

Brak

 ...

Aby określić wiele serii, określ co najmniej 2 kolumny na osi Y i podaj wartości Y tylko w jednej kolumnie Y:

Wartości X Wartości Y serii 1 Wartości Y serii 2
10 brak 75
20 brak 18
33 brak 22
55 16 brak
14 61 brak
48 3 brak

 

Opcje konfiguracji

Nazwa
aggregationTarget
Sposób grupowania wybranych danych w etykietkach:
  • 'category': pogrupuj wybrane dane według wartości x.
  • 'series': pogrupuj wybrane dane według serii.
  • 'auto': zgrupuj wybrane dane według wartości x, jeśli wszystkie wybrane wartości mają tę samą wartość X. W przeciwnym razie pogrupuj wybrane dane według serii.
  • 'none': wyświetlaj tylko 1 etykietkę przy każdym wyborze.
Pole aggregationTarget jest często używane w połączeniu z parametrami selectionMode i tooltip.trigger, na przykład: 
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ślnie: „auto”.
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.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”
chart.title

W przypadku wykresów Material (materiały) ta opcja określa tytuł.

Typ: ciąg znaków
Wartość domyślna:null
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
chartArea

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

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

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

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

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

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

Szerokość obszaru wykresu.

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

Wysokość obszaru wykresu.

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

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

Typ: tablica ciągów znaków
Domyślne:kolory domyślne
krzyżyk

Obiekt z właściwościami krzyżyka wykresu.

Typ: obiekt
Wartość domyślna:null
crosshair.color

Kolor krzyżyka wyrażony jako nazwa koloru (np. „niebieski”) lub wartość RGB (np. „#adf”).

Typ: ciąg znaków
Typ:domyślny
crosshair.focused

Obiekt zawierający po zaznaczeniu właściwości krzyżyka.
Przykład: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Typ: obiekt
Domyślny:domyślny
crosshair.opacity

Przezroczystość krzyżyka, gdzie 0.0 to pełna przezroczystość, a 1.0 – pełna nieprzezroczystość.

Typ: liczba
Wartość domyślna: 1,0
crosshair.orientation

Orientacja krzyżyka: „pionowa” tylko w przypadku włosów pionowych, „pozioma” tylko w przypadku włosów poziomych lub „obie” w przypadku tradycyjnego krzyżyka.

Typ: ciąg znaków
Domyślnie: „zarówno”
crosshair.selected

Obiekt zawierający po zaznaczeniu właściwości krzyżyka.
Przykład: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Typ: obiekt
Domyślny:domyślny
crosshair.trigger

Kiedy wyświetlać krzyżyk: na 'focus', 'selection' lub 'both'.

Typ: ciąg znaków
Domyślnie: „zarówno”
curveType

Kontroluje krzywą linii, gdy szerokość linii jest różna od zera. Użyj jednego z tych rodzajów wartości:

  • „brak” – proste linie bez krzywej.
  • „funkcja” – kąty linii zostaną wygładzone.
Type:string
Domyślna: „none” (brak).
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
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.

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

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 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
hAxis.gridlines

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

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

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

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

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

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

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

Ogólny format to:

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

Więcej informacji znajdziesz w sekcji Daty i godziny.

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

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

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

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

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

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

Typ: liczba
Wartość domyślna: 1
hAxis.minorGridlines.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).

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ą.
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] }
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.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ść.

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

Typ: liczba
Domyślne:automatyczne
hAxis.viewWindowMode

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

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

Określa zakres przycięcia osi poziomej.

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

Maksymalna wartość danych poziomych do renderowania.

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

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

Minimalna wartość danych poziomych do renderowania.

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

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

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

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

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

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

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

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

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

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

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

Początkowo wybrany indeks stron legendy liczony od zera.

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

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

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

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

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

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

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

Szerokość linii w pikselach. Aby ukryć wszystkie linie i pokazać tylko punkty, wpisz 0.

Typ: liczba
Wartość domyślna: 0
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”
pointShape

Kształt poszczególnych elementów danych: „koło”, „trójkąt”, „kwadrat”, „romb”, „gwiazdka” lub „wielokąt”. Przykłady znajdziesz w dokumentacji punktów .

Typ: ciąg znaków
Domyślnie: „okrąg”.
pointSize

Średnica punktów danych w pikselach. Aby ukryć wszystkie punkty, wpisz 0. Możesz zastąpić wartości dla poszczególnych serii za pomocą właściwości series. Jeśli korzystasz z lini trendu, ta opcja wpłynie również na pointSize tworzących ją punktów, co zmieni jej widoczną szerokość. Aby tego uniknąć, możesz zastąpić to ustawienie za pomocą opcji trendlines.n.pointsize.

Typ: liczba
Wartość domyślna: 7
pointsVisible

Określa, czy punkty będą wyświetlane. Aby ukryć wszystkie punkty, ustaw wartość false. Możesz zastąpić wartości dla poszczególnych serii za pomocą właściwości series. Jeśli używasz lini trendu, opcja pointsVisible będzie miała wpływ na widoczność punktów na wszystkich liniach trendu, chyba że zastąpisz ją opcją trendlines.n.pointsVisible.

Można ją też zastąpić, używając roli stylu w postaci "point {visible: true}".

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

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

Typ: ciąg znaków
Domyślnie: „pojedynczy”
seria

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

  • color – kolor, który będzie używany w tej serii. Podaj prawidłowy ciąg znaków HTML koloru.
  • labelInLegend – opis serii, który pojawi się w legendzie wykresu.
  • lineWidth – zastępuje globalną wartość lineWidth dla tej serii.
  • pointShape – zastępuje globalną wartość pointShape dla tej serii.
  • pointSize – zastępuje globalną wartość pointSize dla tej serii.
  • pointsVisible – zastępuje globalną wartość pointsVisible dla tej serii.
  • 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.

Typ: wartość logiczna
Wartość domyślna: fałsz.
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.
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.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.units

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

Ogólny format to:

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

Więcej informacji znajdziesz w sekcji Daty i godziny.

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

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

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

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

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

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

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

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

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

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

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

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

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

Przykłady:

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

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

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

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

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

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

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

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

Typ: liczba
Domyślne:automatyczne
vAxis.minValue

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

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

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

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

Określa zakres przycięcia osi pionowej.

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

Maksymalna wartość danych pionowych do renderowania.

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

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

Minimalna wartość danych pionowych do renderowania.

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

Typ: liczba
Domyślnie automatycznie
szerokość

Szerokość wykresu w pikselach.

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

Metody

Metoda
draw(data, options)

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

Return Type: brak
getAction(actionID)

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

var cli = chart.getChartLayoutInterface();

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

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

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

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

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

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

Wywołuj je po narysowaniu wykresu.

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

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

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

Wywołuj je po narysowaniu wykresu.

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

Zwraca wykres zserializowany jako identyfikator URI obrazu.

Wywołuj je po narysowaniu wykresu.

Zobacz Drukowanie wykresów PNG.

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

Zwraca tablicę wybranych elementów wykresu. Elementy do wyboru to punkty i wpisy legendy. Punkt odpowiada komórce w tabeli danych, a wpis legendy do kolumny (indeks wiersza 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 do wyboru to punkty i wpisy legendy. Punkt odpowiada komórce w tabeli danych, a wpis legendy do kolumny (indeks wiersza 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.