📌  相关文章
📜  google.visualization.columnchart (1)

📅  最后修改于: 2023-12-03 15:01:03.176000             🧑  作者: Mango

Google可视化工具包: 列图 (Column Chart)

Google Visualization API是一项基本的、开放的 Web 服务，允许您创建交互式可视化工具（如图表和地图），并将其嵌入到Web页面中。这个工具包包含了很多种类型的图形，包括柱状图、线图、饼图、面积图、散点图、地图等等。在这里，我们将着重介绍其中的一种图表——列图（Column Chart）。

什么是列图？

列图是一种基于柱状图的图表，在水平轴上用垂直条形图表示数据。每个柱子的高度表示该类别中的值的数量。它通常用于比较几个类别之间的数量或比率。

Google.visualization.ColumnChart

Google.visualization.ColumnChart是Google Visualization API中提供的一个类库，用于绘制交互式的可视化图表。Google.visualization.ColumnChart是Column Chart的实现，可以使用该类库绘制多种类型的柱状图，例如：

  • 普通的列图
  • 多列图
  • 累积列图
  • 簇列图
  • 线柱混合图
如何使用Google.visualization.ColumnChart？

首先，您需要在html文件中导入Google Visualization API的js文件和underscore.js文件。这里我们使用Google-hosted版本的api：

<script src="https://www.google.com/jsapi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.12.0/underscore-min.js"></script>

接下来，在javascript文件中，您需要加载所需的可视化类库：

google.load('visualization', '1', {packages: ['corechart']});

然后，在代码中创建一个包含数据的DataTable对象：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addRows([
  ['January', 1000],
  ['February', 1170],
  ['March', 660],
  ['April', 1030],
  ['May', 800],
  ['June', 1230],
  ['July', 1000],
  ['August', 1170],
  ['September', 660],
  ['October', 1030],
  ['November', 800],
  ['December', 1230]
]);

接着，创建一个ColumnChart对象，并将其与html中的一个div元素相关联：

var options = {
  title: 'Sales per Month',
  height: 400,
  hAxis: {
    title: 'Month'
  },
  vAxis: {
    title: 'Sales'
  }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

这会生成带有样式的交互式列图，包含一些用户交互特色，如鼠标悬停高亮，工具提示和缩放等。

总结

列图是Google Visualization API中的一种基础图表，它在比较类别之间的数量或比率时很有用。Google.visualization.ColumnChart是Google Visualization API中用于绘制交互式柱状图表的类库之一，您可以使用它来动态绘制多种类型的柱状图表。

参考