Omówienie
Wykres rozproszony zawiera punkty wykresu. Gdy użytkownik najedzie kursorem na punkty, wyświetli się etykietka z dodatkowymi informacjami.
W zależności od możliwości przeglądarki wykresy punktowe Google są renderowane w przeglądarce za pomocą SVG lub VML.
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ą kręgów. Inne kształty możesz określić za pomocą opcji pointShape
. Więcej informacji znajdziesz w dokumentacji dostosowywania punktów.
Podobnie jak w przypadku większości innych wykresów Google możesz animować je za pomocą zdarzeń. Możesz dodać detektor zdarzeń dla pierwszego zdarzenia ready
i ponownie narysować wykres po wprowadzeniu odpowiednich zmian. Po pierwszym zdarzeniu ready
możesz nasłuchiwać zdarzenia animationfinish
, aby powtórzyć proces, co spowoduje powstanie ciągłej animacji. Opcja animation
steruje przebiegiem ponownego rysowania: od razu (bez animacji), płynnie oraz szybko i bez problemu.
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() { ... }
<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 punktowych Material
W 2014 r. ogłosiliśmy wytyczne dotyczące wspólnego wyglądu i stylu działania wszystkich usług i aplikacji (takich jak aplikacje na Androida) działających na platformach Google. Nazywamy to Material Design. Będziemy udostępniać wersje „Material” wszystkich naszych głównych wykresów. Możesz ich użyć, jeśli Ci się spodobają.
Tworzenie rozproszonych wykresów rozproszonych przypomina tworzenie klasycznego wykresu punktowego. Wczytujesz interfejs Google wizualizacji API (chociaż korzystasz z pakietu 'scatter'
zamiast pakietu 'corechart'
), definiujesz tabelę danych, a następnie tworzysz obiekt (ale klasę google.charts.Scatter
zamiast google.visualization.ScatterChart
).
Uwaga: Material Design nie będą działać w starszych wersjach Internet Explorera. (IE8 i starsze wersje nie obsługują SVG, co wymaga wykresów Material).
Wykresy rozproszonych materiałów są znacznie lepsze od wykresów klasycznych
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 materiałowe są w wersji beta. Wygląd i opcje interakcji są w większości ostateczne, ale wiele opcji dostępnych na wykresach klasycznych nie jest jeszcze w nich dostępnych. Listę opcji, które nie są jeszcze obsługiwane, znajdziesz w tym artykule.
Ponadto deklarowane opcje nie zostały sfinalizowane, jeśli więc korzystasz z opcji klasycznych, musisz je przekonwertować na opcje materiałowe, zastępując ten wiersz:
chart.draw(data, options);
...na przykład:
chart.draw(data, google.charts.Scatter.convertOptions(options));
Wykresy z podwójną osią Y
Czasami na wykresie punktowym chcesz wyświetlić 2 serie z 2 niezależnymi osiami Y: oś lewa dla jednej serii, prawa o drugiej:
Warto zwrócić uwagę, że nasze 2 osi Y są oznaczone inaczej („Ocena końcowego egzaminu” i „Godziny badania”), ale każdy z nich ma własną, niezależną skalę i linię siatki. Jeśli chcesz dostosować to zachowanie, użyj opcji vAxis.gridlines
.
W poniższym kodzie opcje axes
i series
określają podwójny wygląd wykresu. Opcja series
określa, która oś zostanie użyta ('final grade'
i 'hours studied'
– nie wymagają one powiązania z nazwami kolumn w tabeli danych). Następnie opcja axes
tworzy podwójny wykres z osią Y, umieszczając oś 'Final Exam Grade'
po lewej, 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(); };
Top-X top
Uwaga: osie X X są dostępne tylko w przypadku wykresów materiałowych (tj. tych z pakietem scatter
).
Jeśli chcesz umieścić etykiety i tytuły osi X u góry wykresu, a nie na dole, w opcjach Material (opcja axes.x
) możesz to zrobić:
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 rozproszonych Material Name 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 w tabeli reprezentuje zbiór punktów danych z tą samą wartością osi x.
Kolumny:
Kolumna 0 | Kolumna 1 | … | Kolumna N | |
---|---|---|---|---|
Cel: | Wartości punktów X danych | Wartości serii 1 Y | … | Wartości serii N Y |
Typ danych: | ciąg znaków, liczba lub data/data/godzina | ciąg znaków, liczba lub data/data/godzina | … | ciąg znaków, liczba lub data/data/godzina |
Rola: | dane | dane | … | dane |
Opcjonalne role kolumn: | Brak |
… |
Aby określić wiele serii, określ co najmniej 2 kolumny na osi Y, a wartości Y podaj tylko w jednej kolumnie Y:
Wartości X | Wartości serii 1 Y | Wartości serii 2 Y |
---|---|---|
10 | brak | 75 |
20 | brak | 18 |
33 | brak | 22 |
55 | 16 | brak |
14 | 61 | brak |
48 | 3 | brak |
Opcje konfiguracji
Nazwa | |
---|---|
cel agregacji |
Sposób wyboru wielu danych w etykietkach:
aggregationTarget jest często używany w połączeniu z usługami selectionMode i tooltip.trigger , np.:
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; Typ: ciąg znaków
Domyślny: „auto”.
|
animacja.czas trwania |
Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji. Typ: liczba
Wartość domyślna: 0
|
animacja.wygładzanie |
Funkcja wygładzania zastosowana w animacji. Dostępne są te opcje:
Typ: ciąg znaków
Domyślnie: „linear”
|
animacje.startup, |
Określa, czy wykres będzie animowany podczas pierwszego rysowania. Jeśli Typ: wartość logiczna
Default (Fałsz) – wartość domyślna
|
adnotację.boxStyle |
W przypadku wykresów, które obsługują adnotacje, obiekt 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 na wykresie adnotacji. Typ: obiekt
Domyślne:null
|
adnotacje.datum |
W przypadku wykresów, które obsługują adnotacje, obiekt
annotations.datum pozwala zastąpić wybór wykresu Google w przypadku adnotacji poszczególnych elementów danych (np. wartości wyświetlanych na każdym słupku na wykresie słupkowym). Możesz zarządzać kolorem za pomocą annotations.datum.stem.color , długości łodygi za pomocą annotations.datum.stem.length i stylu w annotations.datum.style .
Typ: obiekt
Domyślny:kolor to „czarny”, długość to 12, a styl to „punkt”.
|
adnotacje.domena |
W przypadku wykresów, które obsługują adnotacje, obiekt
annotations.domain umożliwia zastąpienie wyboru wykresu Google w przypadku adnotacji udostępnionych dla domeny (główna oś wykresu, na przykład oś X na typowym wykresie liniowym). Możesz zarządzać kolorem za pomocą annotations.domain.stem.color , długości łodygi za pomocą annotations.domain.stem.length i stylu w annotations.domain.style .
Typ: obiekt
Domyślny: kolor to „czarny”; długość to 5; styl to „punkt”.
|
adnotacje.wysoki kontrast. |
W przypadku wykresów, które obsługują adnotacje, wartość logiczna
annotations.highContrast pozwala zastąpić kolor adnotacji wybrany przez Wykresy Google. Domyślnie annotations.highContrast ma wartość Prawda, co powoduje, że wykresy wybierają kolor adnotacji z dobrym kontrastem: jasne kolory na ciemnym tle i ciemny na jasnym tle. Jeśli ustawisz wartość annotations.highContrast na wartość fałsz i nie określisz własnego koloru adnotacji, w Grafie Google zostanie użyty domyślny kolor serii dla tej adnotacji:
Typ: wartość logiczna
Wartość domyślna: true
|
adnotacje.stem |
W przypadku wykresów, które obsługują adnotacje, obiekt
annotations.stem umożliwia zastąpienie wyboru Wykresów Google jako stylu rdzeni. Możesz zarządzać kolorem
za pomocą annotations.stem.color i łodygi
za pomocą annotations.stem.length . Pamiętaj, że opcja długości rdzeń macierzy nie wpływa na adnotacje ze stylem 'line' : w przypadku adnotacji 'line' z punktem odniesienia długość łodygi jest zawsze taka sama jak tekst, a w przypadku adnotacji domeny 'line' jej przedłużenie jest widoczne na całym wykresie.
Typ: obiekt
Domyślny: kolor to „czarny”, długość adnotacji to 5, a adnotacji adnotacji to 12.
|
adnotacje.style |
W przypadku wykresów, które obsługują adnotacje, opcja
annotations.style pozwala zastąpić typ adnotacji wybrany przez wykres Google. Może to być 'line' lub 'point' .
Typ: ciąg znaków
Domyślny: „point”
|
adnotacje.tekstStyl |
Na wykresach, 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 na wykresie adnotacji. Typ: obiekt
Domyślne:null
|
Położenietytułu osi |
Położenie tytułów osi w porównaniu z miejscami na wykresie. Obsługiwane wartości:
Typ: ciąg znaków
Domyślny: „out”
|
backgroundColor, |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
backgroundColor.type |
Kolor obramowania wykresu w postaci ciągu kolorów HTML. Typ: ciąg znaków
Domyślne: „#666”
|
backgroundColor.rayWidth |
Szerokość obramowania w pikselach. Typ: liczba
Wartość domyślna: 0
|
backgroundColor.fill |
Kolor wypełnienia wykresu w postaci koloru HTML. Typ: ciąg znaków
Domyślny: „biały”.
|
chart.title |
W przypadku wykresów Material ta opcja określa tytuł. Typ: ciąg znaków
Domyślne: null
|
wykres.podtytuł |
W przypadku wykresów Material ta opcja określa podtytuł. Tylko Material Charts obsługują napisy. Typ: ciąg znaków
Domyślne:null
|
obszarGraficzny |
Obiekt z użytkownikami do konfigurowania położenia i rozmiaru obszaru wykresu (tam, gdzie rysowany jest sam wykres, z wyłączeniem osi i legend). Obsługiwane są 2 formaty: liczba lub liczba, po której następuje %. Prosta liczba to wartość w pikselach. Liczba, po której następuje %, to wartość procentowa. Przykład: Typ: obiekt
Domyślne:null
|
chartArea.backgroundColor. |
Kolor tła wykresu. Ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielskiej nazwy koloru. Podczas korzystania z tych obiektów możesz podać te właściwości:
Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
wykresArea.left |
Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.top |
Odległość, w jakiej znajduje się wykres od górnej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
|
krzyżyk |
Obiekt zawierający właściwości krzyżyka na wykresie. Typ: obiekt
Domyślne:null
|
krzyżyk.kolor |
Kolor krzyżyka wyrażony jako nazwa koloru (np. „niebieski”) lub RGB (np. „#adf”). Typ: ciąg znaków
Typ: domyślny
|
krzyżyk |
Obiekt zawierający właściwości krzyżaka po zaznaczeniu. Typ: obiekt
Domyślny:domyślny
|
crosshair.opacity, |
Przezroczystość krzyżyka – wartość Typ: liczba
Domyślna: 1.0
|
crosshair.orientation, |
Orientacja celownika może mieć ustawienie „pionowa” tylko do włosów pionowych, „pozioma” – tylko do włosów poziomych lub „obie” – do tradycyjnych włosów. Typ: ciąg znaków
Wartość domyślna: „both”
|
krzyżyk |
Obiekt zawierający właściwości krzyżyka po zaznaczeniu. Typ: obiekt
Domyślny:domyślny
|
crosshair.trigger |
Kiedy wyświetlać krzyżyk: Typ: ciąg znaków
Wartość domyślna: „both”
|
typ krzywej |
Steruje krzywą linii, gdy szerokość linii nie wynosi 0. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Wartość domyślna: „none”
|
ochroność danych |
Przezroczystość punktów danych – 1,0 jest całkowicie nieprzejrzysty, a 0,0 – całkowicie przezroczysty. Na wykresach punktowych, histogramach, słupkach i kolumnach dotyczy to widocznych danych: kropek na wykresie rozproszonym i prostokątów w innych. W przypadku wykresów, na których wybór danych tworzy kropkę, np. wykres liniowy lub warstwowy, dotyczy to okręgów, które pojawiają się po najechaniu kursorem lub zaznaczeniem. Wykres mieszany pokazuje oba rodzaje zachowań i ta opcja nie ma wpływu na inne wykresy. Aby zmienić przezroczystość linii trendu, zobacz przezroczystość linii trendu. Typ: liczba
Domyślna: 1.0
|
włącz interfejs interaktywny |
Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna: true
|
explorer |
Opcja Ta funkcja jest eksperymentalna i w przyszłych wersjach może ulec zmianie. Uwaga: eksplorator obsługuje tylko osie ciągłe (np. liczby lub daty). Typ: obiekt
Domyślne:null
|
explorer.actions, |
Eksplorator wykresów Google obsługuje 3 działania:
Typ: Tablica ciągów znaków
Domyślne: ['dragToPan', 'rightClickToReset']
|
explorer.osie |
Domyślnie, gdy używana jest opcja Typ: ciąg znaków
Domyślne:przesuwanie w poziomie i w pionie
|
explorer.keepInBounds, |
Domyślnie użytkownicy mogą przesuwać widok bez względu na to, gdzie znajdują się dane. Aby użytkownicy nie mogli przesuwać treści poza oryginalny wykres, użyj funkcji Typ: wartość logiczna
Wartość domyślna: false
|
odkrywca.maxZoomIn |
Maksymalna wartość, którą może wyświetlić eksplorator. Domyślnie użytkownicy mogą powiększyć widok tak, aby zobaczyć tylko 25% oryginalnego widoku. Ustawienie Typ: liczba
Wartość domyślna: 0,25
|
odkrywca.maxZoomOut |
Maksymalna wartość, którą eksplorator może pomniejszyć. Domyślnie użytkownicy będą mogli pomniejszyć obraz tak bardzo, że wykres zajmie tylko 1/4 dostępnego miejsca. Jeśli zasada jest ustawiona na Typ: liczba
Wartość domyślna: 4
|
odkrywca.zoomdelta |
Gdy użytkownicy powiększają lub pomniejszają obraz, Typ: liczba
Wartość domyślna: 1,5
|
rozmiar czcionki |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: liczba
Domyślna: automatycznie.
|
Czcionka |
Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: ciąg znaków
Domyślny: „solarmora”
|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
Oś h |
Obiekt z członkami, który służy do konfigurowania różnych elementów osi poziomej. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Typ: obiekt
Domyślne: null
|
Numer hAxis.baseline |
Punkt odniesienia dla osi poziomej. Typ: liczba
Domyślna: automatycznie.
|
xAxis.baselineColor |
Kolor punktu odniesienia dla osi poziomej. Może to być dowolny ciąg kolorów HTML, np. Typ: liczba
Domyślny: „czarny”.
|
hAxis.direction, |
Kierunek, w którym rosną wartości na osi poziomej. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
xAxis.format |
Formatujący ciąg etykiet liczbowych. Jest to podzbiór wzorca ICU. Na przykład w polu
Rzeczywiste formatowanie zastosowane do etykiety pochodzi z języka, w którym został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.
W obliczeniu wartości znaczników linii siatki i kilku linii siatki uwzględnianych jest kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii. Alternatywne wersje zostaną odrzucone, jeśli sformatowane etykiety znaczników będą zduplikowane lub nakładają się.
Możesz więc określić Typ: ciąg znaków
Ustawienie domyślne: automatyczne
|
Linia hAxis.gridline |
Obiekt z właściwościami służącymi do konfigurowania linii siatki na osi poziomej. Pamiętaj, że linie siatki na osi poziomej są rysowane pionowo. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Domyślne:null
|
Oś hA.grid.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślny: „#CCC”
|
gAxis.gridlines.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla formuły Typ: liczba
Wartość domyślna: -1
|
xAxis.gridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne:null
|
Linie siatki xAxis.minorGridline |
Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi poziomej, podobnie jak w przypadku opcji hAxis.gridlines. Typ: obiekt
Domyślne: null
|
xAxis.minorGridlines.color |
Kolor poziomych linii siatki w obszarze wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślne:połączenie kolorów siatki i tła.
|
hAxis.minorGridlines.count, |
Opcja Typ: liczba
Wartość domyślna: 1
|
xAxis.minorGridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne: null
|
hAxis.logScale |
Właściwość Typ: wartość logiczna
Wartość domyślna: false
|
TypHaxis.scaleType |
Właściwość
Typ: ciąg znaków
Wartość domyślna: null
|
Oś hAxis.text |
Położenie tekstu na osi poziomej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślny: „out”
|
xAxis.textStyle |
Obiekt określający styl tekstu na osi poziomej. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
xAxis.ticks |
Zastępuje automatycznie generowane znaczniki osi X określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczbą, datą, datą lub godziną) lub obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Wartość ViewWindow zostanie automatycznie rozwinięta, tak by obejmowała wartości minimalne i maksymalne, chyba że określisz Przykłady:
Typ: tablica elementów
Ustawienie domyślne: automatyczne
|
xAxis.title, |
Właściwość Typ: ciąg znaków
Domyślne: null
|
xAxis.titleTextStyle |
Obiekt określający styl tekstu tytułu na osi poziomej. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
xAxis.maxValue |
Przenosi maksymalną wartość osi poziomej do określonej wartości. W przypadku większości wykresów będzie to prawo. Ignorowane, jeśli ta wartość jest ustawiona na wartość mniejszą niż maksymalna wartość x danych.
Typ: liczba
Domyślna:automatycznie.
|
xAxis.minValue |
Przenosi minimalną wartość osi poziomej do określonej wartości. W przypadku większości wykresów jest to lewo. Ignorowane, jeśli ustawiona wartość jest większa niż minimalna wartość X danych.
Typ: liczba
Domyślna: automatycznie.
|
Tryb xAxis.viewWindow |
Określa, jak skaluje oś poziomą, aby renderować wartości na obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo,
haxis.viewWindow.min i haxis.viewWindow.max mają pierwszeństwo.
|
Widok xA.is |
Określa zakres przycięcia osi poziomej. Typ: obiekt
Domyślne:null
|
Oś hx.viewWindow.max |
Maksymalna wartość danych w poziomie do wyrenderowania. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
xAxis.viewWindow.min |
Minimalna wartość danych w poziomie do wyrenderowania. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu, który go zawiera.
|
legenda |
Obiekt z użytkownikami do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
Domyślne: null
|
legend.alignment, |
Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:
Początek, środek i koniec są zależne od stylu legendy (pionowa lub pozioma). Na przykład w legendzie „prawa” odpowiednio „start” i „koniec” znajdują się odpowiednio u góry i u dołu. W przypadku legendy „górny”, „start” i „koniec” znajdziesz odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. W przypadku legend „bottom” domyślną wartością jest „center”, a w innych legendach – „start”. Typ: ciąg znaków
Domyślna: automatycznie.
|
legend.maxLines |
Maksymalna liczba wierszy w legendzie. Ustaw większą liczbę niż 1, aby dodać wiersze do legendy. Uwaga: dokładna logika używana do określenia rzeczywistej liczby renderowanych linii jest nadal zmienna. Ta opcja obecnie działa tylko wtedy, gdy pole legend.position ma wartość „top”. Typ: liczba
Wartość domyślna: 1
|
legend.pageIndex |
Początkowo wybrany indeks oparty na zerowej stronie legendy. Typ: liczba
Wartość domyślna: 0
|
legend.position, |
Pozycja legendy. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Domyślny: „right”
|
legend.textStyle, |
Obiekt określający styl tekstu legendy. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
szerokość wiersza |
Szerokość linii w pikselach. Aby ukryć wszystkie linie i wyświetlić tylko punkty, wpisz 0. Typ: liczba
Wartość domyślna: 0
|
orientacja |
Orientacja wykresu. Jeśli ustawisz wartość Typ: ciąg znaków
Wartość domyślna: „pozioma”
|
PointShape |
Kształt poszczególnych elementów danych: „krąg”, „trójkąt”, „kwadrat”, „romb”, „gwiazdkę” lub „wielokąt”. Przykłady znajdziesz w dokumentacji punktów. Typ: ciąg znaków
Domyślny: „Circle”
|
PointSize |
Średnica punktów danych w pikselach. Aby ukryć wszystkie punkty, wpisz 0. Możesz zastąpić wartości poszczególnych serii za pomocą właściwości Typ: liczba
Wartość domyślna: 7
|
pointsvisible |
Określa, czy punkty mają być wyświetlane. Aby ukryć wszystkie punkty, wybierz
Można ją zastąpić rolą stylu w formacie Typ: wartość logiczna
Wartość domyślna: true
|
Tryb wyboru |
Gdy Typ: ciąg znaków
Wartość domyślna: „single”
|
seriale |
Tablica obiektów, z których każdy opisuje format odpowiedniej serii na wykresie Aby użyć wartości domyślnych dla serii, podaj pusty obiekt {}. Jeśli seria lub wartość nie jest określona, zostanie użyta wartość globalna. Każdy obiekt obsługuje te właściwości:
Możesz podać tablicę obiektów, z których każdy dotyczy serii, w określonej kolejności, lub obiekt, w którym każdy element podrzędny ma klucz numeryczny, który wskazuje serię. Na przykład te 2 deklaracje są identyczne, deklarując pierwszą serię jako czarną i nieobecną w legendie, a czwartą jako czerwoną i nieobecną w legendie: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Domyślnie: {}
|
motyw |
Motyw to zestaw wstępnie zdefiniowanych wartości opcji, które współdziałają ze sobą, aby osiągnąć określone zachowanie wykresu lub efektu wizualnego. Obecnie dostępny jest tylko jeden motyw:
Typ: ciąg znaków
Domyślne: null
|
tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie:bez tytułu.
|
Stanowisko |
Porównanie tytułu wykresu z obszarem obszaru wykresu. Obsługiwane wartości:
Typ: ciąg znaków
Domyślny: „out”
|
stylTextTextStyle |
Obiekt określający styl tekstu tytułu. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
etykietka |
Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Domyślne:null
|
tooltip.ignoreBounds |
Jeśli ustawiona jest wartość Uwaga: dotyczy to tylko etykietek HTML. Jeśli ta opcja jest włączona w przypadku etykietek SVG, wszystkie nadmiary wykraczające poza granice wykresu zostaną przycięte. Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.showColorCode |
Jeśli ma wartość true (prawda), obok informacji o serii w etykietce pokazuj kolorowe kwadraty. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.textStyle |
Obiekt określający styl tekstu etykietki. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
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:
Typ: ciąg znaków
Domyślny: „focus”
|
linie trendu |
Pokazuje linie trendów na wykresach, które je obsługują. Domyślnie używane są liniowe linie trendu, ale można to zmienić za pomocą opcji
Linie trendu są określane dla poszczególnych serii, więc większość opcji będzie wyglądać tak: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Typ: obiekt
Domyślne: null
|
linielinii.n.kolor |
Kolor linii trendu wyrażony jako nazwa koloru angielskiego lub ciąg szesnastkowy. Typ: ciąg znaków
Domyślny: domyślny kolor serii
|
linielinii.n.stopień |
W przypadku linii trendu równych Typ: liczba
Wartość domyślna: 3
|
trends.n.labelInLegend |
Po ustawieniu linia trendu pojawi się w legendzie w postaci tego ciągu znaków. Typ: ciąg znaków
Domyślne: null
|
linielinii.szerokość.linii |
Szerokość linii linii trendu (w pikselach). Typ: liczba
Wartość domyślna: 2
|
linielinii.n.opacity |
Przezroczystość linii trendu od 0,0 (przezroczysta) do 1,0 (nieprzejrzysta). Typ: liczba
Domyślna: 1.0
|
trends.n.pointSize |
Linie trendu składają się ze fragmentu kropką na wykresie. Ta rzadko używana opcja pozwala dostosować rozmiar kropek. Opcja Typ: liczba
Wartość domyślna: 1
|
trends.n.pointsVisible |
Linie trendu składają się z wielu kropek na wykresie. Opcja Typ: wartość logiczna
Wartość domyślna: true
|
linielinii.n.showR2 |
Określa, czy wyświetlać współczynnik determinacji w podpowiedziach legendy czy linii trendu. Typ: wartość logiczna
Wartość domyślna: false
|
linielinii.n.typ |
Określa, czy linie trendu mają wartość Typ: ciąg znaków
Domyślne:liniowe
|
linielinii.n.visibleInLegend |
Określa, czy równanie linii trendu pojawia się w legendzie. Pojawi się on w etykietce linii trendu. Typ: wartość logiczna
Wartość domyślna: false
|
Oś vs |
Obiekt z członkami, który służy do konfigurowania różnych elementów osi pionowej. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Typ: obiekt
Domyślne: null
|
Wartość vAxis.baseline |
Właściwość Typ: liczba
Domyślna: automatycznie.
|
KolorAxis.baseline |
Określa kolor punktu odniesienia dla osi pionowej. Może to być dowolny ciąg kolorów HTML, np. Typ: liczba
Domyślny: „czarny”.
|
OśAvis.direction |
Kierunek, w którym rosną wartości na osi pionowej. Domyślnie niskie wartości znajdują się u dołu wykresu. Określ Typ: 1 lub -1
Wartość domyślna: 1
|
PlikAVIS.format |
Formatujący ciąg etykiet liczbowych. Jest to podzbiór wzorca ICU.
Na przykład w polu
Rzeczywiste formatowanie zastosowane do etykiety pochodzi z języka, w którym został załadowany interfejs API. Więcej informacji znajdziesz w artykule na temat ładowania wykresów z określonego regionu.
W obliczeniu wartości znaczników linii siatki i kilku linii siatki uwzględnianych jest kilka alternatywnych kombinacji wszystkich odpowiednich opcji linii. Alternatywne wersje zostaną odrzucone, jeśli sformatowane etykiety znaczników będą zduplikowane lub nakładają się.
Możesz więc określić Typ: ciąg znaków
Ustawienie domyślne: automatyczne
|
Linie siatki vAxis.grid |
Obiekt z członkami, który służy do konfigurowania linii siatki na osi pionowej. Pamiętaj, że linie siatki osi pionowej są rysowane w poziomie. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {color: '#333', minSpacing: 20} Typ: obiekt
Domyślne:null
|
OśA.vsiat.grid.color |
Kolor pionowych linii siatki wewnątrz obszaru wykresu. Określ prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślny: „#CCC”
|
OśAvis.grid.count |
Przybliżona liczba poziomych linii siatki w obszarze wykresu.
Jeśli podasz liczbę dodatnią dla formuły Typ: liczba
Wartość domyślna: -1
|
Oś vas.grid.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii siatki. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne:null
|
Linie siatki vAxis.minorGrids |
Obiekt z użytkownikami do konfigurowania mniejszych linii siatki na osi pionowej, podobnie jak w przypadku opcji vAxis.gridlines. Typ: obiekt
Domyślne:null
|
Oś v.is.minor.net.kolor |
Kolor pionowych linii siatki wewnątrz obszaru wykresu. Podaj prawidłowy ciąg kolorów HTML. Typ: ciąg znaków
Domyślne:połączenie kolorów siatki i tła.
|
vAxis.minorGridlines.count, |
Opcja generalGridlines.count jest w większości wycofana. Wyjątkiem jest wyłączenie podrzędnych linii siatki przez ustawienie licznika na 0. Liczba mniejszych linii siatki zależy od przedziału między głównymi liniami siatki (patrz vAxis.gridlines.interval) i minimalnej wymaganej przestrzeni (patrz vAxis.minorGridlines.minSpacing). Typ: liczba
Wartość domyślna: 1
|
xAxis.minorGridlines.units |
Zastępuje domyślny format różnych typów danych typu data/data/godzina, gdy są używane na podstawie obliczonych linii podrzędnych siatki. Umożliwia formatowanie lat, miesięcy, dni, godzin, minut, sekund i milisekund. Ogólny format to: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Dodatkowe informacje znajdziesz w artykule Daty i godziny. Typ: obiekt
Domyślne:null
|
vAxis.logScale |
Jeśli ma wartość true (prawda), oś pionowa jest skalą logarytmiczną. Uwaga: wszystkie wartości muszą być dodatnie. Typ: wartość logiczna
Wartość domyślna: false
|
TypAxis.scale |
Właściwość
Typ: ciąg znaków
Domyślne: null
|
Oś vAxis.text |
Położenie tekstu na osi pionowej względem obszaru wykresu. Obsługiwane wartości: „out”, „in”, „none”. Typ: ciąg znaków
Domyślny: „out”
|
StylAxis.text |
Obiekt określający styl tekstu na osi pionowej. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
PlikAxis.ticks |
Zastępuje automatycznie generowane znaczniki osi Y określoną tablicą. Każdy element tablicy powinien być prawidłową wartością znacznika (np. liczbą, datą, datą lub godziną) lub obiektem. Jeśli jest to obiekt, powinien mieć właściwość
Wartość ViewWindow zostanie automatycznie rozwinięta, tak by obejmowała wartości minimalne i maksymalne, chyba że określisz Przykłady:
Typ: tablica elementów
Ustawienie domyślne: automatyczne
|
OśAvis.title |
Właściwość Typ: ciąg znaków
Domyślnie: bez tytułu.
|
StylAxis.titleTextText |
Obiekt określający styl tekstu tytułu osi pionowej. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Wartość xAxis.max |
Przenosi maksymalną wartość osi pionowej do określonej wartości. W przypadku większości wykresów będzie ona większa. Ignorowane, jeśli ta wartość jest ustawiona na wartość mniejszą niż maksymalna wartość y danych.
Typ: liczba
Domyślna: automatycznie.
|
WartośćAxis.minValue |
Przenosi minimalną wartość osi pionowej do określonej wartości – w przypadku większości wykresów będzie ona niższa. Ignorowane, jeśli ta wartość jest ustawiona na wartość większą niż minimalna wartość y.
Typ: liczba
Domyślne:null
|
TrybAvis.viewWindow |
Określa, jak skaluje oś pionową, aby renderować wartości w obszarze wykresu. Obsługiwane są te wartości ciągów:
Typ: ciąg znaków
Domyślny: odpowiednik „ładne”, ale jeśli mają one pierwszeństwo,
vaxis.viewWindow.min i vaxis.viewWindow.max mają pierwszeństwo.
|
Oś-v.is.is |
Określa zakres przycięcia osi pionowej. Typ: obiekt
Domyślne:null
|
Oś v.axis.max |
Maksymalna wartość pionowych danych. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
Axis.viewWindow.min |
Minimalna wartość danych pionowych do renderowania. Ignorowany, gdy Typ: liczba
Ustawienie domyślne: automatyczne
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna – szerokość elementu, który zawiera.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z wymaganym parametrem Typ zwrotu: obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o umieszczonym na ekranie miejscu na wykresie i jego elementach. W zwróconym obiekcie można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Patrz Drukowanie wykresów PNG. Typ zwrotu: ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to punkty i legendy.
Punkt odpowiada komórce w tabeli danych, a wpis legendy w kolumnie (indeks wiersza ma wartość null).
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną x piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
removeAction(actionID) |
Usuwa z wykresu etykietkę z żądaniem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Zaznacza określone elementy wykresu. Anuluje poprzedni wybór.
Elementy, które można wybrać, to punkty i legendy.
Punkt odpowiada komórce w tabeli danych, a wpis legendy w kolumnie (indeks wiersza ma wartość null).
Na tym wykresie możesz wybrać tylko jeden element naraz.
Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, Obsługa zdarzeń i Uruchamianie zdarzeń.
Nazwa | |
---|---|
animationfinish |
Uruchamiane po zakończeniu animacji przejścia. Właściwości: brak
|
click |
Uruchamiane, gdy użytkownik kliknie wykres. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
legendpagination |
Uruchamiane, gdy użytkownik kliknie legendę podziału na strony. Przekazuje aktualny indeks stron oparty na zerowej legendzie i łączną liczbę stron. Właściwości: currentPageIndex, totalPages
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Właściwości: wiersz, kolumna.
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer
Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane do żadnego serwera.