Wykres graficzny świecowy

Ważne: 20 kwietnia 2012 r. oficjalnie wycofano z narzędzi Google Chart API sekcja Wykresy graficzne. Nadal będzie działać zgodnie z naszymi zasadami dotyczącymi wycofywania.

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych

Omówienie

Wykres świecowy renderowany jako obraz przy użyciu interfejsu Google Charts API.

Wykres świecowy służy do wyświetlania wartości otwarcia i zamknięcia nałożonych na całkowitą wariancję. Wykresy świecowe są często używane do przedstawiania wartości akcji. Na tym wykresie elementy, dla których wartość otwarcia jest mniejsza niż wartość zamknięcia, są rysowane na zielono, a te, dla których wartość otwarcia jest większa niż wartość zamknięcia, na czerwono. Więcej informacji znajdziesz w dokumentacji dotyczącej świec 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, w których każdy wiersz opisuje pojedynczy znacznik świecy:

  • Kolumna 0: ciąg znaków używany jako etykieta tego znacznika na osi X.
  • Kolumna 1: liczba określająca dolną/minimalną wartość znacznika. To jest podstawa czarnej linii.
  • Kolumna 2: liczba określająca wartość otwarcia/początkową tego znacznika. Ta wartość wyznacza jedną z krawędzi świecy – górną lub dolną. Jeśli wartość jest niższa od wartości z kolumny 3, świeca ma kolor zielony. W przeciwnym razie ma kolor czerwony.
  • Kolumna 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 wartość jest niższa od wartości z kolumny 2, świeca jest czerwona. W przeciwnym razie ma kolor zielony.
  • Kolumna 4: liczba określająca wysoką/maksymalną wartość tego znacznika. To górny róg czarnej linii.

Opcje konfiguracji

Oprócz opcji obsługiwanych przez ogólny wykres graficzny wykres świecowy obsługuje następujące opcje:

Nazwa Typ Domyślne Opis
backgroundColor string, '#FFFFFF' (biała) Kolor tła wykresu. Jest to ciąg #RRGGBB ze znakiem #.
showAxisLines boolean prawda Określa, czy wyświetlać linie osi. Jeśli ma wartość Fałsz, etykiety osi też nie są wyświetlane.
wysokość Liczba Wysokość elementu nadrzędnego Wysokość wykresu w pikselach. Jeśli 30 < height lub height > 1000,ta wartość przyjmuje domyślną wartość 200.
maksimum Liczba Maksymalna wartość danych Maksymalna wartość na osi Y.
min Liczba Minimalna wartość danych Minimalna wartość na osi Y.
showCategoryLabels boolean prawda Jeśli ma wartość Fałsz, etykiety osi X są ukrywane.
showValueLabels boolean prawda Jeśli ma wartość Fałsz, etykiety osi Y są ukrywane.
showValueLabelsInternal Liczba automatycznie Odstępy między etykietami na osi Y w pikselach.
tytuł string, '' Tekst do wyświetlenia nad wykresem.
szerokość Liczba Szerokość elementu, który zawiera Szerokość wykresu w pikselach. Jeśli wartość parametru width jest mniejsza niż 30 lub większa niż 1000, wartość parametru width jest ustawiona na 300.

Metody

Metoda Typ zwracanej wartości Opis
draw(data, options) brak Rysuje wykres.

Zdarzenia

Możesz się zarejestrować, aby słyszeć zdarzenia opisane na stronie Ogólny wykres graficzny.

Zasady dotyczące danych

Zapoznaj się z zasadami logowania interfejsu Chart API.