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

xrxhb001 2011-10-12 02:35:05

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

...全文

397 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

xrxhb001 2011-10-13

打赏
举报

谢谢5楼，6楼~

xiaona1047985204 2011-10-12

打赏
举报

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

hailinger14 2011-10-12

打赏
举报

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

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

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

luyun2011 2011-10-12

打赏
举报

利用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);

    }

}

xrxhb001 2011-10-12

打赏
举报

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

我是为仔 2011-10-12

打赏
举报

dededede

我是为仔 2011-10-12

打赏
举报

我是为仔 2011-10-12

打赏
举报

<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>