网页中的动态图表是怎么实现的？

类似上面这样的图表是怎样实现的？求详细解答。

9 个解决方案

#1

<h3><span style="background-color:#60d978;color:#337fe5;font-size:24px;"><span style="font-family:Microsoft YaHei;color:#e53333;"><strike><sub>这是真的吗？</sub></strike></span></span></h3>

#2

#3

dededede

#4

这。。上面都是在干嘛啊。求回复啊。。第一次发帖。。。

#5

利用jfreechart组件很容易就实现上述折线图，在网上下一下jfreechart jar包
这是我写好的一个实现上述图表的类，可以参考一下：



import java.awt.Color;

import java.awt.Font;

import java.awt.GradientPaint;


import javax.swing.JFrame;

import javax.swing.JPanel;


import org.jfree.chart.ChartFactory;

import org.jfree.chart.ChartPanel;

import org.jfree.chart.JFreeChart;

import org.jfree.chart.axis.NumberAxis;

import org.jfree.chart.labels.StandardXYToolTipGenerator;

import org.jfree.chart.plot.PlotOrientation;

import org.jfree.chart.plot.XYPlot;

import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;

import org.jfree.data.xy.XYDataset;

import org.jfree.data.xy.XYSeries;

import org.jfree.data.xy.XYSeriesCollection;

import org.jfree.ui.RefineryUtilities;

//折线图

public class LineChartPicture extends JFrame{

    /**

     * Comment for <code>serialVersionUID</code>

     */

    private static final long serialVersionUID = -6659793875323660505L;

    public LineChartPicture(String title){

        super(title);

        setContentPane(generatePicture());

    }

    

    private static XYDataset createDataset(){

        //创建xy坐标

        XYSeries xyseries = new XYSeries("折线图");

        xyseries.add(1.0D, 1.0D);

        xyseries.add(2D, 4D);

        xyseries.add(3D, 3D);

        xyseries.add(4D, 5D);

        xyseries.add(5D, 5D);

        xyseries.add(6D, 7D);

        xyseries.add(7D, 7D);

        xyseries.add(8D, 8D);

        XYSeriesCollection xyseriescollection = new XYSeriesCollection();

        xyseriescollection.addSeries(xyseries);

        return xyseriescollection;

    }


    public static JPanel generatePicture(){

        JFreeChart chart = ChartFactory.createXYLineChart("折线图", "时间（X轴）", "速度（Y轴）", createDataset(), PlotOrientation.VERTICAL, true, true, false);

        chart.setBackgroundPaint(new GradientPaint(0,0,Color.white,100,500,Color.green));

        XYPlot plot = (XYPlot)chart.getPlot();

        XYLineAndShapeRenderer xyLineAndShapeRender = new XYLineAndShapeRenderer();

        xyLineAndShapeRender.setSeriesLinesVisible(0, true);

        xyLineAndShapeRender.setSeriesLinesVisible(1, true);

        xyLineAndShapeRender.setBaseToolTipGenerator(new StandardXYToolTipGenerator());

        plot.setRenderer(xyLineAndShapeRender);

        NumberAxis numberAxis = (NumberAxis)plot.getRangeAxis();

        numberAxis.setStandardTickUnits(NumberAxis.createIntegerTickUnits());

        //设置乱码

        chart.getTitle().setFont(new Font("黑体",Font.BOLD,15)); 

        chart.getLegend().setItemFont(new Font("黑体",Font.BOLD,12));

        //x轴

        plot.getDomainAxis().setTickLabelFont(new Font("黑体",Font.BOLD,12));

        plot.getDomainAxis().setLabelFont(new Font("黑体",Font.BOLD,12));

        //y轴

        plot.getRangeAxis().setLabelFont(new Font("黑体",Font.BOLD,12));

        return new ChartPanel(chart);

    }

    /**

     * @param args

     */

    public static void main(String[] args) {

        LineChartPicture lcp = new LineChartPicture("折线图测试");

        lcp.pack();

        RefineryUtilities.centerFrameOnScreen(lcp);

        lcp.setVisible(true);

    }

}

#6

实现手法有很多
比如楼上采用的是JFreeChart技术，网上搜可以找到
这个技术主要用JAVA在服务端实现，将图输出成图片

另外还有FLEXChart，是通过使用Flash方式在客户端生成柱状图饼状图等，具体可参考FLEX

EXTJS4，主要是使用javascript进行绘图，在客户端实现，具体参考
http://www.sencha.com/products/extjs/

#7

该回复于2011-10-12 17:05:49被版主删除

#8

应该是使用某一个组件完成的你可以上网上搜一下这方面的例子本人也米有做过

#9

谢谢5楼，6楼~

#1