K 线图片图表

重要提示：Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策，该 API 仍可继续使用。

  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 线标记：

  • Col 0：用作 X 轴上此标记的标签的字符串。
  • Col 1：用于指定此标记的下限值/最小值的数字。这是黑线的底点。
  • Col 2：用于指定此标记的开盘值/初始值的编号。这是蜡烛的一个垂直边框。如果小于第 3 列中的值，K 线将为绿色；否则为红色。
  • 第 3 列：用于指定此标记的收盘值/最终值的数字。这是蜡烛的第二个垂直边框。如果小于第 2 列的值，则 K 线将为红色；否则为绿色。
  • 第 4 列：用于指定此标记的最大值/最大值的数字。这是黑线的顶部。

配置选项

除了通用图片图表支持的选项之外，K 线图还支持以下选项：

名称 类型 默认 说明
backgroundColor string '#FFFFFF'（白色） 图表的背景颜色。这是一个包含 #标记的 # RRGGBB 字符串。
showAxisLines boolean true 是否显示轴线。如果此政策设为 false，系统也不会显示轴标签。
高度 number 所包含元素的高度 图表的高度（以像素为单位）。如果 30 < height 或 height > 1,000，则此值默认为 200。
max number 最大数据值 Y 轴最大值。
分钟 number 最低数据值 最小 Y 轴值。
showCategoryLabels boolean true 如果为 false，则隐藏 X 轴标签。
showValueLabels boolean true 如果为 false，则隐藏 Y 轴标签。
showValueLabelsInternal number 自动 Y 轴标签之间的间距（以像素为单位）。
标题 string ” 要在图表上方显示的文本。
宽度 number 所包含元素的宽度 图表的宽度，以像素为单位。如果 width 小于 30 或大于 1,000，则 width 将设为 300。

方法

方法 返回值类型 说明
draw(data, options) 无 绘制图表。

事件

您可以注册以监听通用图片图表页面中所述的事件。

数据政策

请参阅 Chart API 日志记录政策。