此页面由 Cloud Translation API 翻译。

可视化图表：条形图（旧版本）

已弃用

此可视化图表已替换为新版本；请改用新版本。为了便于迁移，请参阅版本说明页面。

概览
示例
正在加载
数据格式
配置选项
方法
活动
数据政策

概览

使用 SVG 或 VML 在浏览器中渲染的水平条形图。点击点显示提示。点击图例条目为线条添加动画效果。如需查看此图表的纵向版本，请参阅柱形图。

开发者：Google

示例

在可视化游乐场中自行编码

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

正在加载

google.load 软件包名称为 "barchart"

  google.load("visualization", "1", {packages: ["barchart"]});

可视化图表的类名称为 google.visualization.BarChart

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

数据格式

表中的每一行代表一组相邻的条形。

表格中的第一列应为字符串，表示该组条的标签。后面可以跟随任意数量的列，所有列都代表代表每组中颜色和相对位置相同的条。

指定行和列中的值用于控制由该行和该列表示的单个条形的高度。

配置选项

名称	类型	默认	说明
轴颜色	字符串或对象	默认颜色	轴的颜色。可能的值是 backgroundColor 配置选项的值。
axisBackgroundColor	字符串或对象	默认颜色	轴背景周围的边框。可能的值是 backgroundColor 配置选项的值。
axisFontSize	number	自动	图表轴文本的字体大小（以像素为单位）。
backgroundColor	字符串或对象	默认颜色	图表主区域的背景颜色。可能是以下选项之一：一个采用 HTML 支持颜色的字符串，例如“red”或“#00cc00” 一个具有 `stroke` `fill` 和 `strokeSize` 属性的对象。 `stroke` 和 `fill` 应该是包含颜色的字符串。strokeSize 是一个数字。例如：`{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`。如果只使用填充，不使用描边，请使用 `stroke:null, strokeSize: 0`。
边框颜色	字符串或对象	默认颜色	图表元素的边框。可能的值是 backgroundColor 配置选项的值。
颜色	字符串或对象数组	默认颜色	颜色数组，其中每个元素都表示一个数据系列的颜色。您应该为每个系列指定一个数组元素。如果为 `is3D=false`，则表示这是一个 HTML 颜色数组。示例：color:['#00FF00','orange'] 如果为 `is3D=true`，则这是一个 HTML 颜色数组或此类对象的数组：`{color:face_color, darker:shade_color}`，其中 `color` 是元素的面色，`darker` 是阴影颜色。不过，如果您为 3D 对象指定 HTML 颜色，那么人脸和阴影将采用相同的颜色，并且 3D 效果也会变小。示例：`{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`。
启用提示	布尔值	true	如果设置为 true，则当用户点击条形时，系统会显示提示。
focusBorderColor	字符串或对象	默认颜色	被聚焦（由鼠标指向）的图表元素周围的边框。可能的值是 backgroundColor 配置选项的值。
高度	number	容器的高度	图表的高度（以像素为单位）。
is3D	布尔值	false	如果设置为 true，则显示三维更改。
堆叠	布尔值	false	如果设置为 true，则行值堆叠（累计）。
传奇	字符串	“right”	图例的位置和类型。可以是以下某一项： “right”- 位于图表右侧。 “left”- 位于图表左侧。 “top”- 图表上方。 “bottom”- 图表下方。 “none”- 不显示图例。
图例背景色	字符串或对象	默认颜色	图表图例区域的背景颜色。可能的值是 backgroundColor 配置选项的值。
图例字体大小	number	自动	图例字体的大小（以像素为单位）。
图例文字颜色	字符串或对象	默认颜色	图例文字颜色。可能的值是 backgroundColor 配置选项的值。
logScale	布尔值	false	如果为 true，则主轴应沿对数进行缩放。
最大值	number	自动	指定 Y 轴的最高网格线。实际网格线将是两个值中的较大者：最大选项值或最高数据值，向上舍入到下一个较高的网格标记。
分钟	number	自动	指定 Y 轴底部的网格线。实际网格线将是两个值中的较小者：最小值选项值或最低的数据值，向下舍入到下一个较低网格标记。
反向轴	布尔值	true	如果设置为 true（默认值），系统会自上而下绘制类别。如果设置为 false，则自下而上绘制条形。
节目类别	布尔值	true	如果为 true，则显示类别标签。如果为 false，则不会。
标题	字符串	无标题	要在图表上方显示的文字。
商品名 X	字符串	无标题	要在横轴下方显示的文字。
标题 Y	字符串	无标题	要按纵轴显示的文本。
标题颜色	字符串或对象	默认颜色	图表标题的颜色。可能的值是 backgroundColor 配置选项的值。
titleFontSize	number	自动	图表标题的字体大小（以像素为单位）。
tooltipFontSize	number	11	提示文字的字体大小。如果提示太小，无法使文本采用指定字体，则字体可能会缩小。
工具提示高度	number	60	提示的高度（以像素为单位）。提示的高度是固定的，绝不会根据文字的长度或字体大小缩小或缩小。但大于图表高度的 1/3 的图片会被剪裁。
提示宽度	number	120	提示的宽度，以像素为单位。提示宽度是固定的，绝不会根据文字的长度或字体大小缩小或缩小。但大于图表宽度的任何内容都会被剪裁。
width	number	容器的宽度	图表的宽度（以像素为单位）。

方法

方法	返回值类型	说明
`draw(data, options)`	无	绘制图表。
`getSelection()`	选择元素数组	标准 `getSelection()` 实现。所选元素是列和单元格元素。用户一次只能选择一个列或单元格。
`setSelection()`	无	标准 `setSelection()` 实现，但仅支持选择一个元素。将每个选择条目视为列或单元格选择。请注意，无法选择标签列。

事件

名称	说明	属性
`onmouseover`	用户将鼠标放在柱形上时触发，并传入相应单元格的行和列索引。	行，列
`onmouseout`	当用户将鼠标从条形移开并传入相应单元格的行和列索引时触发。	行，列
`ready`	此图表已准备好进行外部方法调用。如果您希望与图表交互并在绘制后调用方法，则应在调用 `draw` 方法之前为此事件设置监听器，并仅在事件触发后调用它们。	无
`select`	在用户点击条形或图例时触发。选择条形时，会选择数据表中的相应单元格；选择图例时，会选择数据表中的相应列。如需了解所选内容，请调用 `getSelection()`。	无

数据政策

所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。