Web图表的发展历程

Web图表的发展历程

在深入了解Highcharts之前，有必要了解一下web图表，是如何从在服务器端使用纯HTML绘图，发展到现在在客户端绘图的。

HTML图片映射（服务器端技术）

这种技术在HTML早期就已经被使用了，图表是在web服务器上生成的图片。在像PHP这样的服务器端脚本出现之前，通常是使用CGI执行绘图程序（像gnuplot）输出图片。PHP流行之后，采用GD模块绘图。JpGraph就是采用的这种技术。下面这个例子，展示了如何在HTML中插入一个图片格式的图表。

<img src="pie_chart.php" boarder=0 align="left">

绘图脚本pie_chart.php被嵌入到HTML的img标签当中。当页面加载的时候，浏览器会根据img src属性发起一个HTTP请求，请求pie_chart.php。对浏览器而言，它并不知道.php文件是否是个图片。当web服务器（支持PHP）收到这个请求之后，识别.php扩展名并执行PHP脚本。下面是一小段JpGraph的例子；脚本输出图片内容，并像普通图片一样，以HTTP响应形式返回到客户端。

// 创建一个新图像
$graph = new Graph(350, 250);
// 添加一个x，y数组，作为数据点
$p1 = new LinePlot($datay,$datax);
$graph->Add($p1);
// 以图片的形式输出折线图，返回给客户端
$graph->Stroke();

除此之外，此技术结合HTML map 标签实现图片导航，用户可以点击图片中的某一区域，比如点击饼图中的某一部分，可以加载有另外一个图像的新页面。

这项技术的优点在于：

• 使用服务器端技术，意味着图表的创建不需要用户交互触发。
• 适合自动化的任务，比如定期生成报表，发送带有图片附件的告警邮件。
• 不需要JavaScript。它功能强大，纯HTML，是个瘦客户端。

不过，还有这些缺点：

• 更多的服务器负载。
• 纯HTML，受到技术限制，图片只能实现很少的交互，更没法做成动画。

Java applet （客户端）和 servlet（服务端）

Java applet可以让浏览器执行跨平台的Java字节码（Byte Code），以实现一些HTML无法实现的功能，比如图形显示，动画和更复杂的用户交互。这是首个将传统的服务器端的技术扩展到客户端。在HTML页面中嵌入Java applet，可以使用HTML的applet标记（不推荐）或者object标记，并且需要为浏览器安装Java插件。

下面是个使用object标记将Java applet嵌入HTML的例子。因为在IE和其他浏览器运行环境不同，所以使用了条件注释：

<!--[if !IE]> Non Internet Explorer way of loading applet -->
<object classid="Java:chart.class" type="application/x-java-applet" height="300" width="550" >
<!--<![endif] Internet way of loading applet -->
    <object classid="clsid:8AD9C840..." codebase="/classes/">
    <param name="code" value="chart.class" />
    </object>
<!--[if !IE]> -->
</object>
<!--<![endif]-->

一般说来，Java 2D图像是构建自java.awt.Graphics2D类和Java AWT（Abstract Window Toolkit）的java.awt.geom包。主要的绘图库允许用户选择继承Applet类在浏览器端运行，或者继承Servlet类在服务器端运行。

JFreeChart就是一个使用Java语言的绘图工具。提供2D和3D的解决方案，非商业用途可以免费使用。JFreeChart可以作为applet，servlet或者独立的应用程序。下面applet绘图代码的一部分：

public class AppletGraph extends JApplet {
    // 创建X，Y轴数据
    XYPlot xyPlot = new XYPlot();
    xyPlot.setDataset(defaultXYDataset);
    CombinedDomainXYPlot combinedDomainXYPlot =    new CombinedDomainXYPlot();
    combinedDomainXYPlot.add(xyPlot);
    // 创建 jFreeChart 对象
    JFreeChart jFreeChart = new JFreeChart(combinedDomainXYPlot);
    // 将 jFreeChart 装入一个 chartPanel
    ChartPanel chartPanel = new ChartPanel(jFreeChart);
    chartPanel.setPreferredSize(new Dimension(900,600));
    // 展示 chart panel 
    getContentPane().add(chartPanel);
}

在服务端运行一个绘图程序，需要一个servlet容器，比如Apache Tomcat。在web.xml文件中定义URL和servlet的绑定关系：

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="server_charts" version="2.4" xmlns="..." xmlns:xsi="..." xsi:schemaLocation="...">
    <servlet>
        <servlet-name>PieChartServlet</servlet-name>
        <servlet-class>charts.PieChartServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>PieChartServlet</servlet-name>
        <url-pattern>/servlets/piechart</url-pattern>
    </servlet-mapping>
</web-app>

当servlet容器，比如Tomcat，收到一个HTTP请求http://localhost/servlets/piechart，就会把这个请求解析到一个servlet应用上。web服务器执行对应的绘图servlet，输出图片，再将图片以HTTP响应的形式返回给客户端。

这项技术的优点：

• 高级的图像、动画和用户交互。
• 核心代码可以在客户端、服务器端或是应用程序直接复用。

缺点是：

• Applet的安全性问题
• 当插件崩溃时，会引起浏览器的崩溃或者失去响应。
• CPU占用很高
• 需要Java插件
• 漫长的启动时间
• 标准化的问题

Adobe Shockwave Flash (客户端)

Flash被广泛使用，是因为它为web浏览器提供了音频，图像，动画和视频的功能。浏览器需要安装Adobe Flash Player插件。在HTML5标准流行之前，FLASH是大家绘制图表的共同选择（因为也没有什么其他可选择的）。

采用这项技术的图像软件基本上都是一个导出的Shockwave Flash（SWF）文件。这些SWF文件包含压缩的矢量图，编译过的ActionScript用来创建图表。为了让Flash Player能够显示图像，需要使用object标记，将SWF文件加载到HTML页面当中。这个标记由JavaScript程序在内部创建并加入到页面的DOM中。

在这个object标签内部包含用于绘图的尺寸和SWF路径信息，以及图形数据变量也通过标签传入。因此，只要浏览器见到object标签上这些特殊的参数，就调用已经安装的Flash Player处理SEF文件和参数。要从服务器端传递绘图需要的数据到客户端的Flash Player上，可以使用flashVars这个特定的param标签。例如，在Yahoo的YUI 2中：

<object id="yuiswf1" type="..." data="charts.swf" width="100%" height="100%">
<param name="allowscriptaccess" value="always">
<param name="flashVars" value="param1=value1&param2=value2">
</object>

这些技术带来的好处是：

• 漂亮的图像和动画，丰富的用户交互。

缺点：

• 存在和applet同样的问题。