如何在JSP网页中生成动态图表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在JSP网页中生成动态图表相关的知识，希望对你有一定的参考价值。

JSP如何实现
按数据库的数据动态做出按某时间段的变化分布图
（只要求找到几个固定点即可）

    JSP页面中嵌入动态图表的两种方法 :在JSP页面中插入Applet小程序 ;通过JavaBean动态生成图像。

    JSP是一种广泛应用的网页设计技术 ,它是一种html和Java脚本混合的编程技术 ,它结合了HTML的静态特性和Java语言的动态能力 ,因此用它进行动态网页设计非常方便。在进行图像处理时 ,一般处理静态图片非常容易 ,但是 ,在实际应用中常常需要动态地在网页中生成二维的图形.

    基于JFreeChart开发的一个时序图的绘制。代码如下：

    实例中createDataset()方法用于创建数据集合对象。时序图的数据集合与其他数据集合不同，它需要添加一个时间段内的所有数据，通常采用TimeSeries类进行添加。该实例中通过Math类的random()方法进行随机生成。

    import java.awt.*;
    import java.awt.event.ActionEvent;
    import
    java.awt.event.ActionListener;
    import java.io.BufferedInputStream;
    import
    java.io.DataInputStream;
    import java.io.FileOutputStream;
    import
    java.io.IOException;
    import java.net.URL;
    import
    java.net.URLConnection;
    import java.text.DateFormat;
    import
    java.text.ParseException;
    import java.text.SimpleDateFormat;
    import
    java.util.Calendar;
    import java.util.Date;
    import java.util.Random;

    import javax.swing.JApplet;
    import javax.swing.Timer;

    import org.jfree.chart.*;
    import
    org.jfree.chart.annotations.CategoryTextAnnotation;
    import
    org.jfree.chart.axis.CategoryAnchor;
    import
    org.jfree.chart.axis.CategoryAxis;
    import
    org.jfree.chart.axis.CategoryLabelPositions;
    import
    org.jfree.chart.axis.DateAxis;
    import
    org.jfree.chart.axis.DateTickUnit;
    import
    org.jfree.chart.axis.DateTickUnitType;
    import
    org.jfree.chart.axis.ValueAxis;
    import
    org.jfree.chart.labels.StandardCategoryItemLabelGenerator;
    import
    org.jfree.chart.plot.CategoryPlot;
    import
    org.jfree.chart.plot.PlotOrientation;
    import
    org.jfree.chart.plot.XYPlot;
    import
    org.jfree.chart.renderer.category.BarRenderer;
    import
    org.jfree.chart.title.TextTitle;
    import
    org.jfree.data.category.CategoryDataset;
    import
    org.jfree.data.category.IntervalCategoryDataset;

    import org.jfree.chart.axis.NumberAxis;
    import
    org.jfree.data.category.DefaultCategoryDataset;
    import
    org.jfree.data.gantt.Task;
    import org.jfree.data.gantt.TaskSeries;
    import
    org.jfree.data.gantt.TaskSeriesCollection;
    import
    org.jfree.data.time.Day;
    import org.jfree.data.time.Second;
    import
    org.jfree.data.time.TimeSeries;
    import
    org.jfree.data.time.TimeSeriesCollection;
    import
    org.jfree.data.xy.XYDataset;

    public class shixutu extends JApplet  

          
    //PLOT_FONT是一静态的字体常量对象，使用此对象可以避免反复用到的字体对象被多次创建
           
    private static final Font PLOT_FONT = new Font("黑体", Font.ITALIC ,
    18);
            JFreeChart chart;

     //创建数据动态更新的监听
      class DataGenerator extends Timer
    implements ActionListener
            
    private static final long serialVersionUID =
    3977867288743720504L;
             String
    equID;                                
    //设备ID号
             int
    totalTask;                               
    //任务数
             String[][]
    strTask;                          
    //任务情况

             public void
    actionPerformed(ActionEvent actionevent)             
    addTotalObservation();
                      DataGenerator()

            
     
                
    super(1000,
    null);
                
    addActionListener(this);
                
    System.out.println("super");
            

        
      
        
    //将更新的数据添加到chart中
         private void addTotalObservation()

         
     System.out.println("addTotalObservation");
             
    //设置新的数据集
               
    chart.getXYPlot().setDataset(createDataset());
             
    //通知Jfreechart
    数据发生了改变，重新绘制柱状图
              if
    (chart != null)

                 
    chart.fireChartChanged();
             

         
            private static void
    processChart(JFreeChart chart)
     
                     
    //设置标题字体 
                     
    chart.getTitle().setFont(new Font("隶书", Font.BOLD,
    26)); 
                     
    //设置背景色 
                     
    chart.setBackgroundPaint(new
    Color(252,175,134)); 
                     
    XYPlot plot = chart.getXYPlot();       
    //获取图表的绘制属性 
                     
    plot.setDomainGridlinesVisible(false); 
    //设置网格不显示 
                     
    //获取时间轴对象 
                     
    DateAxis dateAxis = (DateAxis)
    plot.getDomainAxis(); 
                     
    dateAxis.setLabelFont(PLOT_FONT);  
    //设置时间轴字体 
                     
    //设置时间轴标尺值字体 
                     
    dateAxis.setTickLabelFont(new
    Font("宋体",Font.PLAIN,12)); 
                     
    dateAxis.setLowerMargin(0.0);      
    //设置时间轴上显示的最小值 
                     
    //获取数据轴对象 
                     
    ValueAxis valueAxis =
    plot.getRangeAxis(); 
                     
    valueAxis.setLabelFont(PLOT_FONT);                     
    //设置数据字体 
                     
    DateFormat format = new SimpleDateFormat("mm分ss秒");  
    //创建日期格式对象 
                     
    //创建DateTickUnit对象 
                     
    DateTickUnit dtu = new
    DateTickUnit(DateTickUnitType.SECOND,30,format); 
                     
    dateAxis.setTickUnit(dtu);         
    //设置日期轴的日期标签                     //将结果输出在文件中          

    private static
    void writeChartAsImage(JFreeChart chart)
     
                  
    FileOutputStream fos_jpg =
    null; 
                  
    try
     
                      
    fos_jpg = new
    FileOutputStream("D:\\\\test\\\\shixutu.jpg"); 
                      
    ChartUtilities.writeChartAsJPEG(fos_jpg, 1, chart, 400, 300,
    null); 
                  
    catch (Exception e)
     
                     
    e.printStackTrace(); 
                  
    finally
     
                      
    try
     
                          
    fos_jpg.close(); 
                     
    catch (Exception e)
     
                      
     
                  
     
              
     
              
    //创建数据集合对象
              
    public static XYDataset createDataset()
     
                       
    //实例化TimeSeries对象 
                        
    TimeSeries timeseries = new
    TimeSeries("Data"); 
                        
    Second second = new Second(); 
    //实例化Day
                        
                       
    double d =
    50D; 
                        
    //添加一年365天的数据 
                        
    for (int i = 0; i < 500; i++)
      
                            
    d = d + (Math.random() - 0.5) * 10;
    //创建随机数据 
                            
    timeseries.second(day, d);
    //向数据集合中添加数据 
                            
    second = (Second)
    second.next();  
                       
                      
    TimeSeriesCollection timeSeriesCollection =                         
    new
    TimeSeriesCollection(timeseries); 
                      
    //返回数据集合对象 
                      
    return timeSeriesCollection;            //Applet程序初始化   

    public void init()

            // 1.
    得到数据  
          XYDataset  dataset =
    createDataset(); 
                
    // 2.
    构造chart  
                
    chart =
    ChartFactory.createTimeSeriesChart( 
                       
    "时序图示范", //
    图表标题  
                       
    "时间", //
    目录轴的显示标签--横轴  
                       
    "数值", //
    数值轴的显示标签--纵轴  
                       
    dataset, //
    数据集  
                       
    false,
                       
    false, //
    是否生成工具  
                       
    false //
    是否生成URL链接  
                       
    ); 
               
    // 3.
    处理chart中文显示问题  
               
    processChart(chart); 
         
              
    // 4.
    chart输出图片  
               
    //writeChartAsImage(chart); 
              
    // 5. chart
    以swing形式输出   
               
    //6.使用applet输出
               
    ChartPanel chartPanel = new
    ChartPanel(chart);
               
    chartPanel.setPreferredSize(new
    java.awt.Dimension(800,500));       
               
    getContentPane().add(chartPanel);          (new
    DataGenerator()).start();
            


             public void
    paint(Graphics g)

                 if
    (chart != null)

                   
    chart.draw((Graphics2D) g,
    getBounds());
                

            
       
    public void destroy()
       

参考技术A 汗，好像没有直接生成这种图表的，不过可以用JAVA来做。很多java书上都有介绍，如果你没书的话可以看看这个
http://blog.csdn.net/jefflan/archive/2006/07/20/948861.aspx
开源的项目本回答被提问者采纳 参考技术B 用JAVA可以做的，不过要花很多功夫

在 Ruby on Rails Web 应用程序中生成图表的首选方式是啥？

【中文标题】在 Ruby on Rails Web 应用程序中生成图表的首选方式是啥？【英文标题】：What is your preferred way to produce charts in a Ruby on Rails web application?在 Ruby on Rails Web 应用程序中生成图表的首选方式是什么？ 【发布时间】：2010-09-10 09:29:29 【问题描述】：

我想在我的 Ruby on Rails Web 应用程序中添加一些饼图、条形图和散点图。我希望它们具有吸引力，易于添加并且不会引入太多开销。

您会推荐哪种图表解决方案？ 它有什么缺点（需要 Javascript、Flash、昂贵等）？

【问题讨论】：

最后我选择了谷歌图表实现，但我现在切换到谷歌可视化。 我已经在 2013 年切换到 D3 highcharts 是一个很棒的库 【参考方案1】：

如果您不想使用 Flash，Google Charts 是一个很好的选择。它本身很容易使用，但对于 Rails，使用gchartrb gem 更容易。一个例子：

GoogleChart::PieChart.new('320x200', "Things I Like To Eat", false) do |pc| 
  pc.data "Broccoli", 30
  pc.data "Pizza", 20
  pc.data "PB&J", 40 
  pc.data "Turnips", 10 
  puts pc.to_url 
end

【讨论】：

我决定从 Google Charts 和 gchartrb 开始。它简单快捷 - 我可以在需要时转向更复杂的东西。 从那以后我发现 Google 图表有点痛苦，因为饼图标签经常溢出图表的两侧，而且它们并不漂亮。我正在转向 Google Visualizations，它目前看起来好多了，但它是基于 Javascript 的。 你把这段代码放在哪里？在控制器上？怎么显示？【参考方案2】：

如果您不需要图像，并且可以解决需要 JavaScript，您可以尝试使用 jQuery 插件 flot 之类的客户端解决方案。

【讨论】：

【参考方案3】：

我是Gruff Graphs 的粉丝，但如果您不介意依赖外部服务器，Google Charts 也不错。

【讨论】：

【参考方案4】：

它需要闪存并且不是免费的（虽然便宜）：amcharts。

我已经成功使用它并且喜欢它。不久前我评估了许多选项并选择了它。然而，当时的谷歌图表并不像现在看起来那么成熟。如果我现在要重新评估，我会首先考虑。

【讨论】：

【参考方案5】：

还有Scruffy。我最近看了一下代码，它似乎很容易修改/扩展。它生成 svg 和（通过转换）png。

【讨论】：

【参考方案6】：

你试过Google Charts API吗？ - Web 服务 API 并没有真正简单得多。它可以免费使用，易于实现，而且图表看起来不会太粗制滥造。

【讨论】：

【参考方案7】：

Open Flash Chart II 是一个免费选项，可以提供非常好的输出。正如您所料，它确实需要 Flash。

Fusion Charts 更好，但价格为 499 美元。在对此进行研究时，我发现 a cut-down free version 可能满足您的需求。

【讨论】：

【参考方案8】：

我第二次投票给flot。最新版本可以让你做一些我以前认为只能通过 Flash 才能实现的动画和动作。文档很棒。手动编写很简单，但对于简单的情况，使用名为 flotilla 的 Rails 插件会更容易。您应该查看examples page 以更好地了解它的功能。缩放和悬停功能尤其令人印象深刻。

【讨论】：

【参考方案9】：

新的 Google Visualization 似乎可以生成比 Google Graphs 类型更多、外观更好、交互性更好的图表。

http://code.google.com/apis/visualization/

【讨论】：

【参考方案10】：

Morris.js 很好而且开源。与highcharts相比，我想选择它。 Railscasts有一个新的很棒的视频教程

【讨论】：

【参考方案11】：

我刚刚发现 ZiYa 生成了一些非常性感的图表，并且是特定于 Rails 的。

缺点是它使用 Flash，如果您不希望网站链接到 XML/SWF 页面，则每个网站的费用为 50 美元。

[我还没有决定，但想把它扔出去以防人们想投票]

【讨论】：

Gruff Graphs 不需要 Flash，是特定于 Rails 的，并且是免费的。 另外，看来紫雅只是给你简单的方法来实现maani.us/xml_charts/index.php?menu=Gallery 你说得对，lordscarlet ZiYa 只是 XML/SWF 图表的 RoR 包装器，但这可能非常有用。许可证适用于 XML/SWF - 您可以免费获得 ZiYa。 好点。我使用过 XML/SWF，我非常喜欢这些功能。优点涉及闪存功能，但缺点是它是闪存。图片更便于携带。【参考方案12】：

我在 Java Web 应用程序中广泛使用了 Fusion Charts，但它的工作方式应该与 Rails 相同，因为您只是通过 HTML 或 JavaScript 嵌入 Flash 并传递 XML 数据。这是一个漂亮的软件包，他们的支持一直非常积极。

【讨论】：

【参考方案13】：

您应该查看名为 Raphaël 的 Dmitry Baranovskiy's Javascript 库。

【讨论】：

【参考方案14】：

Google 图表非常好，但它不是唯一的 Rails 解决方案。您只需使用您选择的编程语言来动态生成包含数据的 url，然后 google 就会用您的图表返回一个漂亮的图像。

http://code.google.com/apis/chart/

【讨论】：

【参考方案15】：

在过去，我决定自己推出（使用 RVG/RMagick），主要是因为 Gruff 没有我想要的一切。缺点是查找和消除图形代码中的所有错误是一件痛苦的事。这些天来，Gruff 是我的选择，因为它在定制和灵活性方面确实取得了进步。

标准的 Gruff 模板/颜色选择很糟糕，因此您需要亲自动手才能获得最佳效果。

【讨论】：

【参考方案16】：

关于amcharts，有一个“免费”版本，其生成 Flash 图表的限制很少，包括提及“amCharts.com 的图表”。

还有一个不错的插件ambling，它为您提供了一些帮助方法，可以轻松地将图表添加到您的视图中。请注意，amCharts.com reference documentation 仍然是根据您的要求定制图表的必要条件。

【讨论】：

【参考方案17】：

GoogleCharts 和 Gruff 图表很棒，但有时它们缺少一些我需要进行更科学绘图的功能。 gnuplot 有一个 gem，它可能对其中一些情况有所帮助。

http://rgplot.rubyforge.org/

【讨论】：

【参考方案18】：

我已经开始使用protovis 用javascript 生成SVG 图表。我在 Rails 中的基本方法是有一个控制器，它返回要绘制为 JSON 的数据，然后用一些 javascript 和 protovis 将其收集起来。

唯一的缺点是，完整的 IE 支持（因为它基于 SVG）目前无法直接开箱即用......但是，当前的补丁可以很好地提供 IE 支持，可以找到详细信息 @ 987654322@.

【讨论】：

【参考方案19】：

我个人更喜欢基于 JavaScript 的图表而不是 Flash。如果没问题，还请查看High Charts。 Rails plugin 也可用。

【讨论】：

【参考方案20】：

gchartrb gem 似乎不再维护。作者points给这些宝石：

googlecharts gchart（好像也被废弃了）

【讨论】：

【参考方案21】：

我们通过使用 gnuplot 将图表生成为服务器端的 PNG 来做到这一点。这有点老派，图表不是交互式的，但它可以工作并且可以缓存。

（我们这样做的另一个原因是我们可以在报告的 PDF 版本中放入完全相同的图表）。

【讨论】：

【参考方案22】：

这不是专门的 RoR，但是它是 Gruff 到 javascript 的非常巧妙的端口：http://bluff.jcoglan.com/

【讨论】：

【参考方案23】：

ChartDirector。丑陋的 API，但很好的服务器端图像结果。自包含二进制文件。

【讨论】：

【参考方案24】：

FWIW，当适合和完成很重要时，我不喜欢使用 Google 图表。我发现调整大小的变量尤其是不可预测的 - 图表有自己的作用。

我还没有玩过 Gruff/Bluff/etc.，但对于一个知名度更高的项目，我不会使用 Google Charts。

【讨论】：

【参考方案25】：

如果你想要非常性感的图表，易于生成，并且可以启用 Flash，那么你绝对应该看看maani.us xml/swf charts。

它背后的一些 XML 构建器，你准备好了。

【讨论】：

我提到的 ZiYa 包装器为 xml/swf 提供了 Rails 包装器。非常酷的图表。 ZiYa 包装器似乎已经死了，现在严重缺乏文档。【参考方案26】：

FusionCharts 是一个非常好的图表产品。与 RoR 配合得很好。他们的支持和论坛很好。此产品的免费版本具有数量有限的图表和功能，但没有水印。

【讨论】：

【参考方案27】：

我刚开始在我的 rails 3 项目中使用 googlecharts。它既漂亮又干净，似乎是唯一一个基于谷歌可视化 api 的 gem。其他人不活跃，主要使用旧的谷歌图表 api（在 2007-2008 年的某个地方发布）。

https://github.com/mattetti/googlecharts

【讨论】：

【参考方案28】：

D3 已成为我向 Web 应用程序添加漂亮图表的首选方式。您必须做一些其他框架的工作，但外观和控制胜过这一点。

我主要使用 SVG，这意味着没有 IE8，但这已不再是问题。

【讨论】：

【参考方案29】：

HighChart - 用纯 JavaScript 编写的图表库

像highchart-rails、lazy-high-chart 这样的 Gem 可以更轻松地与 Rails 集成

【讨论】：

【参考方案30】：

gem 'chart' 可以轻松地将 ChartJS 和 NVD3 图表添加到 rails。

【讨论】：

以上是关于如何在JSP网页中生成动态图表的主要内容，如果未能解决你的问题，请参考以下文章

如何将帆软中生成的图表与自己写的.net程序进行集成？

如何在列表中生成动态 url？

JSP基础

如何在 Webpack 中生成动态导入块名称

如何在 Python 中生成动态（参数化）单元测试？

如何不在 Python、Django 中生成两次相同的动态图像？