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

Question

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

Answer 1

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

Answer 2

dededede

Answer 3

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

Answer 4

实现手法有很多
比如楼上采用的是JFreeChart技术，网上搜可以找到
这个技术主要用JAVA在服务端实现，将图输出成图片另外还有FLEXChart，是通过使用Flash方式在客户端生成柱状图饼状图等，具体可参考FLEXEXTJS4，主要是使用javascript进行绘图，在客户端实现，具体参考
http://www.sencha.com/products/extjs/