网页中的动态图表是如何实现的

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


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

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

Java code

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);    }}
[解决办法]
实现手法有很多
比如楼上采用的是JFreeChart技术，网上搜可以找到
这个技术主要用JAVA在服务端实现，将图输出成图片

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

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