web图表随笔

最新推荐文章于 2024-12-27 17:15:13 发布

最新推荐文章于 2024-12-27 17:15:13 发布 · 144 阅读

文章标签：

#Web #Flex #Flash #Google #JavaScript #ViewUI

目前的解决方案：

1.java的web图表技术比较成熟的有swt,swing,以及jfreechart等技术。这些技术主要是通过生成图片来达到图表的效果。

2.最近比较流行的技还有像amcharts,flex这样的，以flash行式表现出来的技术。因为flash player在浏览器上的安装率是非常高的，所以这种flash表现形得到了认可。其表现效果是一流的。

3.google可视化api是将是一种趋式，简单高效安全，唯一一点是你的用户要连接互联网上。

amcharts：

amchart是一组由flash做成的图表组件。这些flash没有数据，一但指定了配置文件和数据文件的地址，flash就可以显示出你所需要的图表。

在配置文件中可以设这个flash的颜色，大小，文字属性，柱子，曲线的粗细颜色，是什么类型的柱子或曲线，是否有气泡，是否有图例，定位，鼠标右键及其事件等，stock图还要在里面指定数据文件的地址。

在数据文件中存放了要展示的数，数据一般是XML类型的数据，也有用CSV或TXT的类型的数据。

这里所指的文件不一定是一个真实的文件，也可以是同一个域(指访问的这个flash的域名)内部的URL，垮域URL要是全名。在我们的系统中大部分是用flash所在域的同域中。

参考：http://eboom365.googlecode.com/svn/trunk/技术文档/amchart技术说明.doc

Flex图表：

Flex里有很多图表组件。可以通过HttpService来从后台获得数据，支持xml和json。

参考：http://eboom365.googlecode.com/svn/trunk/技术文档/flex技术说明.doc

Google可视化api:

很简洁，在你的应用里加上：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

你就可以对相应组件进行编辑了。

如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['linechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Height');
        data.addRows(3);
        data.setCell(0, 0, 'Tong Ning mu');
        data.setCell(1, 0, 'Huang Ang fa');
        data.setCell(2, 0, 'Teng nu');
        data.setCell(0, 1, 174);
        data.setCell(1, 1, 523);
        data.setCell(2, 1, 86);
      
        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('visualization')).
            draw(data, null);  
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
  </body>
</html>

效果为：