Ważne: 20 kwietnia 2012 r. część Grafiki na wykresach została oficjalnie wycofana. Będzie nadal działać zgodnie z naszymi zasadami wycofywania.
Omówienie
Wykres świecowy renderowany jako obraz za pomocą interfejsu Google Charts API.
Wykres świecowy służy do wyświetlania wartości otwarcia i zamknięcia nałożonej na łączną wariancję. Wykresy świecowe są często używane do przedstawiania wartości akcji. Na wykresie elementy, w których wartość otwarcia jest niższa niż wartość zamknięcia, są zaznaczone na zielono, a elementy, w których wartość otwarcia jest większa niż wartość zamknięcia, są zaznaczone na czerwono. Więcej informacji znajdziesz w dokumentacji świecowej w interfejsie Google Charts API.
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:["imagechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var options = {}; dataTable = google.visualization.arrayToDataTable([ ['Gainers',10,30,45,60], ['Losers',20,35,25,45], ], true); var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div')); chart.draw(dataTable, options); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Wczytuję
Nazwa pakietu google.charts.load
to "imagechart"
.
google.charts.load('current', {packages: [imagechart]});
Nazwa klasy wizualizacji to google.visualization.ImageCandlestickChart
.
var visualization = new google.visualization.ImageCandlestickChart(container);
Format danych
Pięć kolumn, z których każdy opisuje jeden znacznik świecy:
- Col 0: ciąg znaków używany jako etykieta tego znacznika na osi X.
- Col 1: liczba określająca dolną/minimalną wartość tego znacznika. To podstawa czarnej linii.
- Col 2: liczba określająca wartość otwarcia/początkowa tego znacznika. Ta wartość wyznacza jedną z krawędzi świecy – górną lub dolną. Jeśli będzie niższa od wartości z kolumny 3, świeca będzie zielona, a w innym przypadku będzie czerwona.
- Col 3: liczba określająca wartość zamknięcia lub wartość końcową znacznika. Ta wartość wyznacza drugą z krawędzi świecy – górną lub dolną. Jeśli jest niższa od wartości z kolumny 2, świeca będzie czerwona, a w przeciwnym razie będzie zielona.
- Col 4: liczba określająca wysoką/maksymalną wartość tego znacznika. To górna część czarnej linii.
Opcje konfiguracji
Oprócz opcji obsługiwanych przez ogólny wykres graficzny wykres świecowy obsługuje te opcje:
Nazwa | Typ | Domyślna | Opis |
---|---|---|---|
backgroundColor, | tekst | „#FFFFFF” (biały) | Kolor tła wykresu. To jest ciąg #RRGGBB zawierający znak #. |
liniaAxisLine | wartość logiczna | prawda | Określa, czy mają być wyświetlane linie osi. Jeśli ma wartość Fałsz, etykiety osi nie są wyświetlane. |
wysokość | liczba | Wysokość elementu zawierającego | Wysokość wykresu w pikselach. Jeśli 30 < wysokość lub wysokość > 1000,ta wartość będzie domyślnie ustawiona na 200. |
maks. | liczba | Maksymalna wartość danych | Maksymalna wartość osi Y. |
minuta | liczba | Minimalna wartość danych | Minimalna wartość osi Y. |
Etykieta programu | wartość logiczna | prawda | Jeśli ma wartość false (fałsz), ukrywa etykiety osi X. |
Etykiety programu ShowValue | wartość logiczna | prawda | Jeśli ma wartość false (fałsz), ukrywa etykiety osi Y. |
ShowValueLabel Internal | liczba | auto | Odstępy między etykietami osi Y w pikselach. |
tytuł | tekst | . | Tekst do wyświetlenia nad wykresem. |
szerokość | liczba | Szerokość elementu, który go zawiera | Szerokość wykresu w pikselach. Jeśli szerokość jest mniejsza niż 30 lub większa niż 1000, parametr width będzie mieć wartość 300. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
brak | Rysuje wykres. |
Zdarzenia
Możesz zarejestrować się i usłyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.
Zasady dotyczące danych
Więcej informacji znajdziesz w zasadach rejestrowania interfejsu Chart API.