Wykres obrazu świecy

Ważne: 20 kwietnia 2012 r. część Grafiki na wykresach została oficjalnie wycofana. Będzie nadal działać zgodnie z naszymi zasadami wycofywania.

  1. Przegląd
  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 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.