K 线图片图表

重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已正式弃用。根据我们的弃用政策,该政策将继续有效。

概览

使用 Google 图表 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 列的值小于第 3 列的值,则蜡烛图标将为绿色;否则,其将为红色。
  • Col 3:用于指定此标记的收盘值或最终值的数字。这是蜡烛的第二个垂直边框。如果小于第 2 列的值,蜡烛会显示为红色;否则,会显示为绿色。
  • Col 4:用于指定此标记的最大值/最大值的数字。这是黑线顶端。

配置选项

除了通用图片图表支持的选项外,K 线图还支持以下选项:

名称 类型 默认 说明
backgroundColor 字符串 '#FFFFFF'(白色) 图表的背景颜色。这是一个 #RRGGBB 字符串,其中包含 # 标记。
showAxisLines 布尔值 true 是否显示轴线。如果设置为 false,则轴标签将不会显示。
高度 number 所包含元素的高度 图表的高度(以像素为单位)。如果 30 < 高度高度 > 1000,则此值将默认为 200。
最大值 number 数据最大值 最大 Y 轴值。
分钟 number 数据量下限 Y 轴最小值。
showCategoryLabels 布尔值 true 如果为 false,则隐藏 X 轴标签。
showValueLabels 布尔值 true 如果为 false,则隐藏 Y 轴标签。
showValueLabelsInternal number 自动出价 Y 轴标签之间的间距(以像素为单位)。
标题 字符串 要在图表上方显示的文字。
width number 所在元素的宽度 图表的宽度(以像素为单位)。如果 width 小于 30 或大于 1000,则 width 将设置为 300。

方法

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

事件

您可以进行注册,听听通用图片图表页面中介绍的事件。

数据政策

请参阅 Chart API 日志记录政策