日期:2014-05-17  浏览次数:20673 次

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


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

------解决方案--------------------
利用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/