K 線圖

重要事項：Google 圖表工具的「圖片圖表」部分已自 2012 年 4 月 20 日起正式淘汰。但請放心，該功能將根據淘汰政策持續運作。

  1. Overview
  2. 範例
  3. 載入中
  4. 資料格式
  5. 設定選項
  6. 方法
  7. 事件
  8. 資料政策

總覽

使用 Google Charts API 以圖片形式呈現的 K 線圖。

K 線圖的用途是顯示開盤價和收尾數值在總變異數上方重疊的部分。K 線圖經常用來呈現股票價值的行為。在這張圖表中，開盤價低於收盤價的項目會以綠色繪製，開盤價高於收盤價的項目則會以紅色顯示。詳情請參閱 Google Charts API 中的 K 線圖。

範例

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

載入中

google.charts.load 套件名稱為 "imagechart"。

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

視覺呈現的類別名稱為 google.visualization.ImageCandlestickChart。

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

資料格式

五個資料欄，其中每個資料列都代表一個 K 線標記：

  • 第 0 欄：X 軸上做為標記標籤的字串。
  • 第 1 個值：用於指定這個標記最低/最小值的數字。黑線的底邊。
  • 第 2 欄：指定此標記開盤/初始值的數字。這是方塊的一條垂直邊線。如果低於「欄 3」的值，K 線會是綠色，否則為紅色。
  • 第 3 欄：用於指定標記的收盤價/最終值的數字，這是方塊的另一條垂直邊線。如果低於「欄 2」的值，K 線會是紅色，否則為綠色。
  • Col 4：指定這個標記最高值/最大值的數字。這就是黑線的頂部。

設定選項

除了一般圖片圖表支援的選項之外，K 線圖也支援下列選項：

名稱 類型 預設 說明
backgroundColor 字串 「#FFFFFF」(白色) 圖表的背景顏色。此為 #RRGGBB 字串，包括 # 符號。
showAxisLines boolean true 是否顯示軸線。如果設為 False，系統就不會顯示軸標籤。
高度 號碼 所含元素的高度 圖表的高度，以像素為單位。如果 30 <高度或高度 > 1,000，這個值將預設為 200。
max 號碼 資料最大值 Y 軸上限值。
分鐘 號碼 資料最小值 Y 軸最小值。
showCategoryLabels boolean true 設為 false 時，隱藏 X 軸標籤。
showValueLabels boolean true 如果是 false，則會隱藏 Y 軸標籤。
showValueLabelsInternal 號碼 自動 Y 軸標籤之間的間距 (以像素為單位)。
title 字串 '' 顯示在圖表上方的文字。
寬度 號碼 所含元素的寬度 圖表的寬度，以像素為單位。如果寬度小於 30 或大於 1,000，則 width 會設為 300。

方法

方法 傳回類型 說明
draw(data, options) 無 繪製圖表。

事件

您可以註冊聆聽一般圖片圖表頁面上所述的事件。

資料政策

請參閱圖表 API 記錄政策。