跳到主要内容

使用SVG Google Charts API创建精美的数据可视化

  • 所需知识:JavaScript,PHP和HTML
  • 要求:Web浏览器和文本编辑器
  • 项目时间:45分钟
  • 支持文件

数据是网络上的重要业务。在我们浏览的每一天,我们都会生成大量数据,网站所有者和企业会使用这些数据来确定从下一次大型重新设计到战略和广告支出的所有内容。

然而,在视觉上,数据可能非常无聊,除非您是统计学家,否则大量数据可能特别难以消化。作为网页设计师,语义表明应该使用HTML表格来呈现数据,因为它们提供了最适合标记事实和数字的“语言”。尽管如此,除了一些漂亮的边框和“斑马条纹”行之外,表格还为我们提供了很少的设计潜力,以提高对它们所包含数据的理解。

出于这个原因 - 以及其他方面 - 可用于创建图形图表和图表的解决方案有了很大的增长。像原来的工具Google Image Charts API允许我们采取其他无聊的表格数据,并将其转化为视觉丰富基于图表,补充我们的表格数据,使用户和客户更容易理解和理解。

01.一个勇敢的新世界 - “HTML5”图表

直到最近,大多数在线图表工具都使用动态创建静态图形您可以嵌入网页的标记。

然而,随着HTML5的出现,我们现在有了几种可供选择的技术,使我们能够创建更丰富,更具交互性的图表,使我们超越静态图形和图像的限制。也许最受欢迎的是HTML5画布和SVG(可缩放矢量图形)。

图表

根据Mozilla Developer网络,HTML5 canvas是一个HTML元素,可用于使用脚本绘制图形。 Canvas很快,不像静态图像可以使用脚本动态重绘页面。这使得从HTML表格快速生成图表可视化非常有用,而巧妙的脚本甚至可以允许一些基本的交互性。

存在一些优秀的画布图表工具。我特别喜欢的是Filament Group的jQuery Visualize插件甚至利用了Google的excanvas.js脚本的神奇功能,确保可以在Internet Explorer 6中的浏览器中生成动态图表。

SVG图表 - 首选解决方案

虽然Canvas在渲染动态图表方面表现出色,但它的主要缺点是它是一个基于像素的图形API。使用Canvas,您无法附加事件处理程序或操纵现有对象。一旦绘制它就被绘制出来了。

另一种技术是SVG。虽然不是HTML5规范的严格组成部分,但它提供了优于Canvas在Web上制图的几个优势。

其中最主要的是SVG是基于矢量的,并使用基于XML的语法进行描述。这意味着它维护一个DOM,其属性可以通过脚本在页面生命周期的任何一点进行读取和动态更新。虽然存在与DOM相关的性能考虑 - 特别是在处理较大的文件时 - 通常我觉得SVG是一种更适合在网络上创建图表的技术......

...而Google似乎同意我的看法!

02.谷歌图表API

Google维护并开发了一个名为the的全功能图表库Google Charts API。它非常强大并且是谷歌,得到很好的支持和记录。总而言之,它是在网上制作图表的绝佳选择。

虽然原始版本依赖于图像,但改进的API现在利用HTML5和SVG的强大功能来渲染一系列可自定义的动态图表,并允许复杂的交互性。

向后兼容通过VML对于旧版本的IE,图表将在包括iOS和Android手机在内的各种设备上呈现良好。不需要插件!

03.一个简单的图表示例

启动并运行Google Charts非常简单。这个演示- 基于原来在官方文件- 显示一个简单的饼图。在继续之前先看看来源。

要渲染图表,我们需要三个库。这些是通过加载



翻译字数超限