重要提示: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 日志记录政策。