重要提示:Google 图表工具的“图片图表”部分自 2012 年 4 月 20 日起已被正式弃用。根据我们的弃用政策,该 API 仍可继续使用。
概览
使用 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 日志记录政策。