精华内容
下载资源
问答
  • 最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化图示如下(2016-5-25日的数据):下面就详述一下实现过程吧(注:相较于原网页我隐去了很多内容,本实现过程就只专注于...

    最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化

    图示如下(2016-5-25日的数据):

    88054616_1.png

    下面就详述一下实现过程吧(注:相较于原网页我隐去了很多内容,本实现过程就只专注于Echarts图表实现)

    一:

    HTML页面部分,代码如下:

    88054616_2.gif

    88054616_2.gif

    - 观测数据 -

    // 基于准备好的dom,初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据

    var option = {

    title: { //图表标题

    text: '过去五天数据图表'

    },

    tooltip: {

    trigger: 'axis', //坐标轴触发提示框,多用于柱状、折线图中

    /*

    控制提示框内容输出格式

    formatter: '{b0} ● {a0} : {c0} ℃ ' +

    '● {a1} : {c1} % ' +

    ' ● {a3} : {c3} mm ' +

    ' ● {a4} : {c4} m/s ' +

    '    ● {a2} : {c2} hPa '

    */

    },

    dataZoom: [

    {

    type: 'slider', //支持鼠标滚轮缩放

    start: 0, //默认数据初始缩放范围为10%到90%

    end: 100

    },

    {

    type: 'inside', //支持单独的滑动条缩放

    start: 0, //默认数据初始缩放范围为10%到90%

    end: 100

    }

    ],

    legend: { //图表上方的类别显示

    show:true,

    data:['温度(℃)','湿度(%)','雨量(mm)','风速(m/s)','压强(hPa)']

    },

    color:[

    '#FF3333', //温度曲线颜色

    '#53FF53', //湿度曲线颜色

    '#B15BFF', //压强图颜色

    '#68CFE8', //雨量图颜色

    '#FFDC35' //风速曲线颜色

    ],

    toolbox: { //工具栏显示

    show: true,

    feature: {

    saveAsImage: {} //显示“另存为图片”工具

    }

    },

    xAxis: { //X轴

    type : 'category',

    data : [] //先设置数据值为空,后面用Ajax获取动态数据填入

    },

    yAxis : [ //Y轴(这里我设置了两个Y轴,左右各一个)

    {

    //第一个(左边)Y轴,yAxisIndex为0

    type : 'value',

    name : '温度',

    /* max: 120,

    min: -40, */

    axisLabel : {

    formatter: '{value} ℃' //控制输出格式

    }

    },

    {

    //第二个(右边)Y轴,yAxisIndex为1

    type : 'value',

    name : '压强',

    scale: true,

    axisLabel : {

    formatter: '{value} hPa'

    }

    }

    ],

    series : [ //系列(内容)列表

    {

    name:'温度(℃)',

    type:'line', //折线图表示(生成温度曲线)

    symbol:'emptycircle', //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形

    data:[] //数据值通过Ajax动态获取

    },

    {

    name:'湿度(%)',

    type:'line',

    symbol:'emptyrect',

    data:[]

    },

    {

    name:'压强(hPa)',

    type:'line',

    symbol:'circle', //标识符号为实心圆

    yAxisIndex: 1, //与第二y轴有关

    data:[]

    },

    {

    name:'雨量(mm)',

    type:'bar', //柱状图表示

    //barMinHeight: 10, //柱条最小高度,可用于防止某数据项的值过小而影响交互

    /* label: { //显示值

    normal: {

    show: true,

    position: 'top'

    }

    }, */

    data:[]

    },

    {

    name:'风速(m/s)',

    type:'line',

    symbol:'emptydiamond',

    data:[]

    }

    ]

    };

    myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

    var tems=[]; //温度数组(存放服务器返回的所有温度值)

    var hums=[]; //湿度数组

    var pas=[]; //压强数组

    var rains=[]; //雨量数组

    var win_sps=[]; //风速数组

    var dates=[]; //时间数组

    $.ajax({ //使用JQuery内置的Ajax方法

    type : "post", //post请求方式

    async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)

    url : "ShowInfoIndexServlet", //请求发送到ShowInfoIndexServlet处

    data : {name:"A0001"}, //请求内包含一个key为name,value为A0001的参数;服务器接收到客户端请求时通过request.getParameter方法获取该参数值

    dataType : "json", //返回数据形式为json

    success : function(result) {

    //请求成功时执行该函数内容,result即为服务器返回的json对象

    if (result != null && result.length > 0) {

    for(var i=0;i

    tems.push(result[i].tem); //挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组

    hums.push(result[i].hum);

    pas.push(result[i].pa);

    rains.push(result[i].rain);

    win_sps.push(result[i].win_sp);

    dates.push(result[i].dateStr);

    }

    myChart.hideLoading(); //隐藏加载动画

    myChart.setOption({ //载入数据

    xAxis: {

    data: dates //填入X轴数据

    },

    series: [ //填入系列(内容)数据

    {

    // 根据名字对应到相应的系列

    name: '温度',

    data: tems

    },

    {

    name: '湿度',

    data: hums

    },

    {

    name: '压强',

    data: pas

    },

    {

    name: '雨量',

    data: rains

    },

    {

    name: '风速',

    data: win_sps

    }

    ]

    });

    }

    else {

    //返回的数据为空时显示提示信息

    alert("图表请求数据为空,可能服务器暂未录入近五天的观测数据,您可以稍后再试!");

    myChart.hideLoading();

    }

    },

    error : function(errorMsg) {

    //请求失败时执行该函数

    alert("图表请求数据失败,可能是服务器开小差了");

    myChart.hideLoading();

    }

    })

    myChart.setOption(option); //载入图表

    88054616_2.gif

    88054616_2.gif

    二:

    Servlet部分,客户端请求提交到 ShowInfoIndex 处,先在 web.xml 里配置一下Servlet映射:

    88054616_2.gif

    88054616_2.gif

    BlogExample

    ShowInfoIndexServlet

    EchartsExample.ShowInfoIndexServlet

    ShowInfoIndexServlet

    /ShowInfoIndexServlet

    88054616_2.gif

    88054616_2.gif

    关于ShowInfoIndexServlet,简单说一下请求-响应中间的过程:

    客户端发送图表请求给Servlet,Servlet接收到请求后先获取客户端请求查看的气象站名称,然后从数据库(SqlServer2005 Express版)中获取最近五天内该气象站所有的采集数据(装在List中),再用Gson工具将该List转换成Json对象返回给客户端,客户端接收到返回的Json对象后对其进行解析并将相应数据填入Echarts中,然后作显示;

    其中Record.java是只对外提供get/set方法的用于封装数据的普通实体类,DBUtil.java是JDBC方式下专门提供Connection、Statement、ResultSet等的数据库工具类。

    (原本的连接数据库并获取数据过程需经过业务逻辑层与数据访问层,较为复杂,这里隐去这两层,直接在Servlet内连接数据库并拿取数据)

    Ps:墙裂建议使用PreparedStatement进行参数化查询,这样可以有效避免SQL注入!

    ShowInfoIndexServlet代码如下:

    88054616_2.gif

    88054616_2.gif

    package EchartsExample;

    import java.io.IOException;

    import java.sql.Connection;

    import java.sql.PreparedStatement;

    import java.sql.ResultSet;

    import java.sql.SQLException;

    import java.text.SimpleDateFormat;

    import java.util.*;

    import javax.servlet.ServletException;

    import javax.servlet.http.HttpServlet;

    import javax.servlet.http.HttpServletRequest;

    import javax.servlet.http.HttpServletResponse;

    import com.google.gson.Gson;

    /**

    * 响应观测记录展示页的Echarts图表数据请求(使用json格式返回客户端需要的数据)

    * @author zhong

    *

    */

    public class ShowInfoIndexServlet extends HttpServlet {

    /**

    *

    */

    private static final long serialVersionUID = 1L;

    @Override

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    doPost(req,resp);

    }

    @Override

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    request.setCharacterEncoding("UTF-8"); //设定客户端提交给servlet的内容按UTF-8编码

    response.setCharacterEncoding("UTF-8"); //设定servlet传回给客户端的内容按UTF-8编码

    response.setContentType("text/html;charset=UTF-8"); //告知浏览器用UTF-8格式解析内容

    String name = request.getParameter("name"); //获取台站名参数

    //获取当天在内的五天以前的0点格式字符串(用于数据库查询)

    Calendar cal = Calendar.getInstance();

    cal.add(Calendar.DATE, -4); //获取当天在内的五天以前的日期时间

    SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd 00:00:00"); //设定日期格式

    String fiveDaysAgoStr = sdf1.format(cal.getTime()); //将五天前的日期时间按指定格式转换成字符串

    //获取当前时间并将其转换成指定格式的字符串(用于数据库查询)

    Date now = new Date();

    SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    String nowStr = sdf2.format(now);

    //System.out.println(nowStr);

    //======================================连接数据库操作============================================================================================

    /*

    * 连接数据库并获取五天内该名称的气象站的所有采集数据

    */

    List records = new ArrayList(); //用一个ArrayList来盛装封装了各气象数据的对象

    Connection conn = null;

    PreparedStatement pstmt = null;

    ResultSet rs = null;

    try {

    conn = DBUtil.getConnection(); //获取与数据库的连接

    String sql = "select * from alldata where data_taizhan_num = ? and data_date >= ? and data_date <= ? order by data_date asc"; //初始化SQL查询语句

    pstmt = conn.prepareStatement(sql); //创建preparedStatement语句对象

    pstmt.setString(1, name); //设定查询参数

    pstmt.setString(2, fiveDaysAgoStr);

    pstmt.setString(3, nowStr);

    rs = pstmt.executeQuery(); //获取查询到的结果集

    while (rs.next()) {

    //封装Record对象

    Record r = new Record();

    r.setTaizhan_num(rs.getString(1));

    r.setDate(rs.getTimestamp(2));

    r.setTem(rs.getString(3));

    r.setHum(rs.getString(4));

    r.setPa(rs.getString(5));

    r.setRain(rs.getString(6));

    r.setWin_dir(rs.getString(7));

    r.setWin_sp(rs.getString(8));

    //将时间转换成给定格式便于echarts的X轴日期坐标显示

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    String str = sdf.format(rs.getTimestamp(2));

    r.setDateStr(str);

    //System.out.println(r.getTem()+" | "+r.getHum()+" | "+r.getPa()+" | "+r.getRain()+" | "+r.getWin_dir()+" | "+r.getWin_sp());

    records.add(r); //将封装好的Record对象放入列表容器中

    }

    } catch (SQLException e) {

    System.out.println("查询出错,操作未完成!");

    e.printStackTrace();

    } finally {

    //查询结束后释放资源

    DBUtil.close(rs);

    DBUtil.close(pstmt);

    DBUtil.close(conn);

    }

    //======================================连接数据库操作(完)============================================================================================

    //将list中的对象转换为Json格式的数组

    Gson gson = new Gson();

    String json = gson.toJson(records);

    //System.out.println(json);

    //将json数据返回给客户端

    response.setContentType("text/html; charset=utf-8");

    response.getWriter().write(json);

    }

    }

    88054616_2.gif

    88054616_2.gif

    alldata表部分数据截图:

    88054616_3.png

    Record类代码如下:

    88054616_2.gif

    88054616_2.gif

    package EchartsExample;

    import java.sql.*;

    /**

    * 封装气象数据信息

    * @author zhong

    *

    */

    public class Record {

    private String taizhan_num; //台站名

    private String tem; //温度

    private String hum; //湿度

    private String pa; //压强

    private String rain; //雨量

    private String win_dir; //风向

    private String win_sp; //风速

    private String dateStr; //观测日期(用于Echarts显示格式)

    private Timestamp date; //观测日期(原始格式)

    /**

    * 获取观测日期(用于echarts图表展示);

    * @return 观测日期值

    */

    public String getDateStr() {

    return dateStr;

    }

    /**

    * 设置观测日期(用于echarts图表展示);

    * @param dateStr 待设置观测日期值

    */

    public void setDateStr(String dateStr) {

    this.dateStr = dateStr;

    }

    /**

    * 获取产生该观测记录的台站名称;

    * @return 台站名称

    */

    public String getTaizhan_num() {

    return taizhan_num;

    }

    /**

    * 设置产生该观测记录的台站名称;

    * @param taizhan_num 待设置台站名称

    */

    public void setTaizhan_num(String taizhan_num) {

    this.taizhan_num = taizhan_num;

    }

    /**

    * 获取温度;

    * @return 温度值

    */

    public String getTem() {

    return tem;

    }

    /**

    * 设置温度;

    * @param tem 待设置温度值

    */

    public void setTem(String tem) {

    this.tem = tem;

    }

    /**

    * 获取湿度;

    * @return 湿度值

    */

    public String getHum() {

    return hum;

    }

    /**

    * 设置湿度;

    * @param hum 待设置湿度值

    */

    public void setHum(String hum) {

    this.hum = hum;

    }

    /**

    * 获取压强;

    * @return 压强值

    */

    public String getPa() {

    return pa;

    }

    /**

    * 设置压强;

    * @param pa 待设置压强值

    */

    public void setPa(String pa) {

    this.pa = pa;

    }

    /**

    * 获取雨量;

    * @return 雨量值

    */

    public String getRain() {

    return rain;

    }

    /**

    * 设置雨量;

    * @param rain 待设置雨量值

    */

    public void setRain(String rain) {

    this.rain = rain;

    }

    /**

    * 获取风向;

    * @return 风向值

    */

    public String getWin_dir() {

    return win_dir;

    }

    /**

    * 设置风向;

    * @param win_dir 待设置风向值

    */

    public void setWin_dir(String win_dir) {

    this.win_dir = win_dir;

    }

    /**

    * 获取风速;

    * @return 风速值

    */

    public String getWin_sp() {

    return win_sp;

    }

    /**

    * 设置风向;

    * @param win_sp 待设置风向值

    */

    public void setWin_sp(String win_sp) {

    this.win_sp = win_sp;

    }

    /**

    * 获取观测日期;

    * @return 观测日期

    */

    public Timestamp getDate() {

    return date;

    }

    /**

    * 设置观测日期;

    * @param date 观测日期值

    */

    public void setDate(Timestamp date) {

    this.date = date;

    }

    }

    88054616_2.gif

    88054616_2.gif

    DBUitl类(数据库工具类)代码如下:

    88054616_2.gif

    88054616_2.gif

    package EchartsExample;

    import java.sql.*;

    import org.apache.tomcat.jdbc.pool.DataSource;

    import org.apache.tomcat.jdbc.pool.PoolProperties;

    /**

    * 数据库工具类(采用了tomcat jdbc pool)

    * @author zhong

    *

    */

    public class DBUtil {

    private static DataSource ds;

    static {

    //配置tomcat jdbc pool (连接池)

    PoolProperties p = new PoolProperties();

    p.setUrl("jdbc:sqlserver://localhost:1433; DatabaseName=weather"); //设置连接的url

    p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); //载入数据库驱动

    p.setUsername("sa"); //用于远程连接的用户名

    p.setPassword("2003NianDeDiYiChangXue"); //密码

    p.setJmxEnabled(true);

    p.setTestWhileIdle(false);

    p.setTestOnBorrow(true);

    p.setValidationQuery("SELECT 1");

    p.setTestOnReturn(false);

    p.setValidationInterval(30000);

    p.setTimeBetweenEvictionRunsMillis(30000);

    p.setMaxActive(100);

    p.setInitialSize(10);

    p.setMaxWait(10000);

    p.setRemoveAbandonedTimeout(60);

    p.setMinEvictableIdleTimeMillis(30000);

    p.setMinIdle(10);

    p.setLogAbandoned(true);

    p.setRemoveAbandoned(true);

    p.setJdbcInterceptors(

    "org.apache.tomcat.jdbc.pool.interceptor.ConnectionState;"+

    "org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer");

    ds = new DataSource();

    ds.setPoolProperties(p);

    }

    private DBUtil() {}

    /**

    * 获取一个数据库连接(Connection);

    * @return Database Connection

    */

    public static Connection getConnection() {

    Connection conn = null;

    try {

    conn = ds.getConnection();

    } catch (SQLException e) {

    e.printStackTrace();

    }

    return conn;

    }

    /**

    * 关闭传入的Connection;

    * @param conn 待关闭的Connection

    */

    public static void close(Connection conn) {

    try {

    if (conn != null) {

    conn.close();

    conn = null;

    }

    } catch (SQLException e) {

    e.printStackTrace();

    }

    }

    /**

    * 关闭传入的Statement;

    * @param stmt 待关闭的Statement

    */

    public static void close(Statement stmt) {

    try {

    if (stmt != null) {

    stmt.close();

    stmt = null;

    }

    } catch (SQLException e) {

    e.printStackTrace();

    }

    }

    /**

    * 关闭传入的ResultSet;

    * @param rs 待关闭的ResultSet

    */

    public static void close(ResultSet rs) {

    try {

    if (rs != null) {

    rs.close();

    rs = null;

    }

    } catch (SQLException e) {

    e.printStackTrace();

    }

    }

    }

    88054616_2.gif

    88054616_2.gif

    ——————————————————————————我是小小分割线————————————————————————————————————

    关于远程连接(包括使用Eclipse连接)SqlServer2005我再多嘴两句:

    当确认连接的URL,驱动加载,用户名,密码都配置正确时,仍然抛出 java.lang.NullPointerException 的话,请打开开始菜单Microsoft SQL Server 2005软件目录下的SQL Server配置管理器:

    ①:启用SQL Server 2005网络配置 下的 SQLEXPRESS协议 内的 TCP/IP 协议,并右键TCP/IP协议选择属性,确保IP地址一栏最末的TCP端口为1433,具体见下图

    88054616_4.png

    ②:启用 SQL Native Client配置 下的 客户端协议 内的 TCP/IP 协议,并右键查看TCP/IP 属性,确保端口为1433,具体见下图

    88054616_5.png

    ③:重新启动 SQL Server 2005服务 下的 SQL Server服务,详情见下图

    88054616_6.png

    至此,应该就解决了java.lang.NullPointerException这个错误了。

    ————————————————————————我是小小分割线————————————————————————————————————

    让我们再回到原来的Echarts图表显示过程上,你可以试着在后台打印看看转换出的Json字符串,关于Json的使用这里我不再多言解释,具体可参考简单易懂的官方教程:http://www.w3school.com.cn/json/

    最后再贴一下实现效果吧:

    88054616_7.png

    展开全文
  • Flourish之动态曲线

    2020-07-31 17:14:49
    我们总是会在网上看到一些动态曲线图,其实用Flourish工具制作它们十分简单。 首先打开网址: https://app.flourish.studio/@flourish/horserace 此网站是国外网站,访问速度有点慢,但不需要翻墙。 点击创建...

    我们总是会在网上看到一些动态曲线图,其实用Flourish工具制作它们十分简单。

    首先打开网址:
    https://app.flourish.studio/@flourish/horserace
    此网站是国外网站,访问速度有点慢,但不需要翻墙。

    点击创建(Create visualisation)
    在这里插入图片描述
    如果是初次使用,会提示创建账号。可以使用页面翻译根据指示创建账号。

    创建账号成功进去后,出现的页面如下。点击Data,上传自己的数据(Upload data)
    在这里插入图片描述
    在这里插入图片描述
    这里就需要先把数据存放在excel表格中,然后导入。
    在这里插入图片描述此数据为某地区统计局数据

    点击preview,再点击replay开始运行
    在这里插入图片描述
    可以根据分数或等级来运行

    可以自定义你需要的尺寸,方便放至其他社交平台
    在这里插入图片描述
    在右边还有许多可以自定义的设置,我一般是不怎么修改的。可以打开网页翻译来查看更为简单。
    在这里插入图片描述
    接下来是导出了,该网站导出则是要收费的。
    在这里插入图片描述
    打扰了,此时就要使用录屏工具了,我一般改用QQ录屏;如果要制作动图的话,再使用格式工厂将其转为GIF就可以啦。

    希望对你有所帮助!

    展开全文
  • Amcharts 实现动态曲线

    千次阅读 热门讨论 2010-08-25 16:07:00
    一直在做在Java里如何实现动态曲线图,在amcharts网站找到了动态曲线图的例子,但是只有配置文件,没有如何实现的,php代码不公开。然后自己又研究了很久,实现的都不是很理想,直到最近问题终于解决了,在...

    一直在做在Java里如何实现动态曲线图,在amcharts网站找到了动态曲线图的例子,但是只有配置文件,没有如何实现的,php代码不公开。然后自己又研究了很久,实现的都不是很理想,直到最近问题终于解决了,在Java中使用Java代码也能实现了。

    首先是amline_setting.xml的配置

    <?xml version="1.0" encoding="UTF-8"?>
    <!-- Value between [] brackets, for example [#FFFFFF] shows default value which is used if this parameter is not set -->
    <!-- This means, that if you are happy with this value, you can delete this line at all and reduce file size -->
    <!-- value or explanation between () brackets shows the range or type of values you should use for this parameter -->
    <!-- the top left corner has coordinates x = 0, y = 0                                                                -->
    <!-- "!" before x or y position (for example: <x>!20</x>) means that the coordinate will be calculated from the right side or the bottom -->
    <settings>
      <data_type>xml</data_type>
      <reload_data_interval>1</reload_data_interval>
      <add_time_stamp>true</add_time_stamp>
      <digits_after_decimal>2</digits_after_decimal>
     <plot_area>
      <border_alpha>100</border_alpha>
      <border_color>DAF0FD</border_color>
     <margins>
      <top>10</top>
      <bottom>30</bottom>
      <left>5</left>
      <right>3</right>
      </margins>
      </plot_area>
     <grid>
     <x>
      <color>38AEE0</color>
      <alpha>100</alpha>
      </x>
     <y_left>
      <color>38AEE0</color>
      <alpha>100</alpha>
      </y_left>
      </grid>
     <axes>
     <x>
      <width>1</width>
      <color>DAF0FD</color>
      </x>
     <y_left>
      <alpha>0</alpha>
      </y_left>
      </axes>
     <values>
     <x>
      <skip_first>false</skip_first>
      <skip_last>false</skip_last>
      </x>
     <y_left>
      <min>50</min>
      <max>70</max>
      <unit>$</unit>
      <unit_position>left</unit_position>
      <inside>true</inside>
      <skip_last>true</skip_last>
      </y_left>
      </values>
     <indicator>
      <zoomable>false</zoomable>
      <color>357BBC</color>
      <x_balloon_text_color>FFFFFF</x_balloon_text_color>
      <y_balloon_on_off>false</y_balloon_on_off>
      </indicator>
     <legend>
      <enabled>false</enabled>
      </legend>
    <graphs>
     <graph>
      <color>357BBC</color>
      <bullet>round_outlined</bullet>
     </graph>
    </graphs>
      </settings>

     

    然后是数据文件的配置 amline.jsp:

    <%@ page language="java" import="java.util.*"%>
    <%@ page contentType="text/xml; charset=utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <?xml version="1.0" encoding="UTF-8"?>
    <chart>
    <series>
    <%
           for(int i=0;i<7;i++)
           {
            Date date=new Date();
      String []strdate=date.toString().split(" ");
      String subdate=strdate[3];
    %>
    <value xid="<%=i%>"><%=subdate%></value>
    <%
            Thread.sleep(1000);
           }
    %>
    </series>
    <graphs>
    <graph>
    <%
      for(int j=0;j<7;j++)
      {
        Double num1=Math.random()*(63.00-55.00)+55.00;
     String num2=num1.toString().substring(0, 5);
    %>
    <value xid="<%=j%>"><%=num2%></value>
    <%
      }
    %>
    </graph>
    </graphs>
    </chart>

     

    最后到页面显示配置 amline.html:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>amline</title>
    </head>

    <body>
    <!-- saved from url=(0013)about:internet -->
    <!-- ampie script-->
      <script type="text/javascript" src="amline/swfobject.js"></script>
     <div id="flashcontent">
     显示
      <strong>You need to upgrade your Flash Player</strong>
     </div>
     <script type="text/javascript">
      // <![CDATA[  
      var so = new SWFObject("amline/amline.swf", "amline", "800", "600", "8", "#FFFFFF");
      so.addVariable("path", "amline/");
      so.addVariable("settings_file", escape("amline/amline_settings.xml")); 
      so.addVariable("data_file", "amline.jsp");  
            so.addVariable("preloader_color", "#999999");
      so.write("flashcontent");
      // ]]>
     </script>
    <!-- end of ampie script -->
    </body>
    </html>

    最后会出现如下效果(如果运行起来就是动态会不断变化的,只是现在只能截取一段图像了)

    展开全文
  • 最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp 图示如下(2016-5-25日的数据): 下面就详述...

    最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化

    具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp

    图示如下(2016-5-25日的数据):

    无标题

    下面就详述一下实现过程吧(注:相较于原网页我隐去了很多内容,本实现过程就只专注于Echarts图表实现)

     

    一:

    HTML页面部分,代码如下:

    复制代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="zh-CN">
        <head>
        
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">   <!-- 在IE运行最新的渲染模式 -->
            <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 初始化移动浏览显示  -->
            <meta name="Author" content="Dreamer-1.">        
            
            <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
            <script type="text/javascript" src="js/echarts.common.min.js"></script>
        
        <title>- 观测数据 -</title>
        </head>
    
        <body>
    
            <!-- 显示Echarts图表 -->
            <div style="height:410px;min-height:100px;margin:0 auto;" id="main"></div>                        
                        
          
      
            <script type="text/javascript">
                
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {    //图表标题
                    text: '过去五天数据图表'
                },
                tooltip: {
                    trigger: 'axis', //坐标轴触发提示框,多用于柱状、折线图中
                    /*
                     控制提示框内容输出格式
                    formatter: '{b0}<br/><font color=#FF3333>&nbsp;●&nbsp;</font>{a0} : {c0} ℃ ' + 
                                   '<br/><font color=#53FF53>●&nbsp;</font>{a1} : {c1} % ' +          
                                   '<br/><font color=#68CFE8>&nbsp;●&nbsp;</font>{a3} : {c3} mm ' +
                                   '<br/><font color=#FFDC35>&nbsp;●&nbsp;</font>{a4} : {c4} m/s ' +
                                   '<br/><font color=#B15BFF>&nbsp;&nbsp;&nbsp;&nbsp;●&nbsp;</font>{a2} : {c2} hPa ' 
                    */
                },
                dataZoom: [
                     {
                         type: 'slider',    //支持鼠标滚轮缩放
                         start: 0,            //默认数据初始缩放范围为10%到90%
                         end: 100
                     },
                     {
                         type: 'inside',    //支持单独的滑动条缩放
                         start: 0,            //默认数据初始缩放范围为10%到90%
                         end: 100
                     }
                ],
                legend: {    //图表上方的类别显示               
                    show:true,
                    data:['温度(℃)','湿度(%)','雨量(mm)','风速(m/s)','压强(hPa)']
                },
                color:[
                       '#FF3333',    //温度曲线颜色
                       '#53FF53',    //湿度曲线颜色
                       '#B15BFF',    //压强图颜色
                       '#68CFE8',    //雨量图颜色
                       '#FFDC35'    //风速曲线颜色
                       ],
                toolbox: {    //工具栏显示             
                    show: true,
                    feature: {                
                        saveAsImage: {}        //显示“另存为图片”工具
                    }
                },
                xAxis:  {    //X轴           
                    type : 'category',
                    data : []    //先设置数据值为空,后面用Ajax获取动态数据填入
                },
                yAxis : [    //Y轴(这里我设置了两个Y轴,左右各一个)
                            {
                                //第一个(左边)Y轴,yAxisIndex为0
                                 type : 'value',
                                 name : '温度',
                                 /* max: 120,
                                 min: -40, */
                                 axisLabel : {
                                     formatter: '{value} ℃'    //控制输出格式
                                 }
                             },
                             {
                                //第二个(右边)Y轴,yAxisIndex为1
                                 type : 'value',
                                 name : '压强',
                                 scale: true,
                                 axisLabel : {
                                     formatter: '{value} hPa'
                                 }
                             }
                         
                ],
                series : [    //系列(内容)列表                      
                            {
                                name:'温度(℃)',
                                type:'line',    //折线图表示(生成温度曲线)
                                symbol:'emptycircle',    //设置折线图中表示每个坐标点的符号;emptycircle:空心圆;emptyrect:空心矩形;circle:实心圆;emptydiamond:菱形                        
                                data:[]        //数据值通过Ajax动态获取
                            },
                            
                            {
                                name:'湿度(%)',
                                type:'line',
                                symbol:'emptyrect',
                                data:[]
                            },
                            
                            {
                                name:'压强(hPa)',
                                type:'line',
                                symbol:'circle',    //标识符号为实心圆
                                yAxisIndex: 1,        //与第二y轴有关
                                data:[]
                            },
                            
                            {
                                name:'雨量(mm)',
                                type:'bar',        //柱状图表示
                                //barMinHeight: 10,    //柱条最小高度,可用于防止某数据项的值过小而影响交互
                                /* label: {    //显示值
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                }, */
                                data:[]
                            },
                            
                            {
                                name:'风速(m/s)',
                                type:'line',
                                symbol:'emptydiamond',
                                data:[]
                            }                
                ]
            };
             
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
             
             var tems=[];        //温度数组(存放服务器返回的所有温度值)
             var hums=[];        //湿度数组
             var pas=[];        //压强数组
             var rains=[];        //雨量数组
             var win_sps=[];    //风速数组
             var dates=[];        //时间数组
             
             $.ajax({    //使用JQuery内置的Ajax方法
             type : "post",        //post请求方式
             async : true,        //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
             url : "ShowInfoIndexServlet",    //请求发送到ShowInfoIndexServlet处
             data : {name:"A0001"},        //请求内包含一个key为name,value为A0001的参数;服务器接收到客户端请求时通过request.getParameter方法获取该参数值
             dataType : "json",        //返回数据形式为json
             success : function(result) {
                 //请求成功时执行该函数内容,result即为服务器返回的json对象
                 if (result != null && result.length > 0) {
                        for(var i=0;i<result.length;i++){       
                           tems.push(result[i].tem);        //挨个取出温度、湿度、压强等值并填入前面声明的温度、湿度、压强等数组
                           hums.push(result[i].hum);
                           pas.push(result[i].pa);
                           rains.push(result[i].rain);
                           win_sps.push(result[i].win_sp);
                           dates.push(result[i].dateStr);
                        }
                        myChart.hideLoading();    //隐藏加载动画
                        
                        myChart.setOption({        //载入数据
                            xAxis: {
                                data: dates    //填入X轴数据
                            },
                            series: [    //填入系列(内容)数据
                                          {
                                        // 根据名字对应到相应的系列
                                        name: '温度',
                                        data: tems
                                    },
                                          {
                                        name: '湿度',
                                        data: hums
                                    },
                                        {
                                        name: '压强',
                                        data: pas
                                    },
                                        {
                                        name: '雨量',
                                        data: rains
                                    },
                                        {
                                    name: '风速',
                                    data: win_sps
                                   }
                           ]
                        });
                        
                 }
                 else {
                     //返回的数据为空时显示提示信息
                     alert("图表请求数据为空,可能服务器暂未录入近五天的观测数据,您可以稍后再试!");
                       myChart.hideLoading();
                 }
             
            },
             error : function(errorMsg) {
                 //请求失败时执行该函数
                 alert("图表请求数据失败,可能是服务器开小差了");
                 myChart.hideLoading();        
             }
        })
    
        myChart.setOption(option);    //载入图表
             
        </script>
            
        </body>
    </html>
    复制代码

     

    二:

    Servlet部分,客户端请求提交到 ShowInfoIndex 处,先在 web.xml 里配置一下Servlet映射:

    复制代码
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
      <display-name>BlogExample</display-name>
    
        <servlet>
            <servlet-name>ShowInfoIndexServlet</servlet-name>
            <servlet-class>EchartsExample.ShowInfoIndexServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>ShowInfoIndexServlet</servlet-name>
            <url-pattern>/ShowInfoIndexServlet</url-pattern>
        </servlet-mapping>
      
    </web-app>
    复制代码

    关于ShowInfoIndexServlet,简单说一下请求-响应中间的过程:

    客户端发送图表请求给Servlet,Servlet接收到请求后先获取客户端请求查看的气象站名称,然后从数据库(SqlServer2005 Express版)中获取最近五天内该气象站所有的采集数据(装在List中),再用Gson工具将该List转换成Json对象返回给客户端,客户端接收到返回的Json对象后对其进行解析并将相应数据填入Echarts中,然后作显示;

    其中Record.java是只对外提供get/set方法的用于封装数据的普通实体类,DBUtil.java是JDBC方式下专门提供Connection、Statement、ResultSet等的数据库工具类。

    (原本的连接数据库并获取数据过程需经过业务逻辑层与数据访问层,较为复杂,这里隐去这两层,直接在Servlet内连接数据库并拿取数据)

    Ps:墙裂建议使用PreparedStatement进行参数化查询,这样可以有效避免SQL注入!

     

    ShowInfoIndexServlet代码如下:

    复制代码
    package EchartsExample;
    import java.io.IOException;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.text.SimpleDateFormat;
    import java.util.*;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.google.gson.Gson;
    
    /**
     * 响应观测记录展示页的Echarts图表数据请求(使用json格式返回客户端需要的数据)
     * @author zhong
     *
     */
    public class ShowInfoIndexServlet extends HttpServlet {
    
        /**
         * 
         */
        private static final long serialVersionUID = 1L;
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            doPost(req,resp);
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
            request.setCharacterEncoding("UTF-8");    //设定客户端提交给servlet的内容按UTF-8编码
            response.setCharacterEncoding("UTF-8");    //设定servlet传回给客户端的内容按UTF-8编码
            response.setContentType("text/html;charset=UTF-8");    //告知浏览器用UTF-8格式解析内容
                    
            String name = request.getParameter("name");    //获取台站名参数
            
            //获取当天在内的五天以前的0点格式字符串(用于数据库查询)
            Calendar  cal = Calendar.getInstance();
            cal.add(Calendar.DATE, -4);        //获取当天在内的五天以前的日期时间
            SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy-MM-dd 00:00:00");    //设定日期格式
            String fiveDaysAgoStr = sdf1.format(cal.getTime());    //将五天前的日期时间按指定格式转换成字符串
                    
            //获取当前时间并将其转换成指定格式的字符串(用于数据库查询)
            Date now = new Date();  
            SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");  
            String nowStr = sdf2.format(now);  
    //System.out.println(nowStr);      
            
            
            
    //======================================连接数据库操作============================================================================================        
            /*
             * 连接数据库并获取五天内该名称的气象站的所有采集数据
             */
            List<Record> records = new ArrayList<Record>();    //用一个ArrayList来盛装封装了各气象数据的对象
            
            Connection conn = null;
            PreparedStatement pstmt = null;
            ResultSet rs = null;
            
            try {
                conn = DBUtil.getConnection();    //获取与数据库的连接
                String sql = "select * from alldata where data_taizhan_num = ? and data_date >= ? and data_date <= ? order by data_date asc";    //初始化SQL查询语句
                pstmt = conn.prepareStatement(sql);    //创建preparedStatement语句对象    
                pstmt.setString(1, name);    //设定查询参数
                pstmt.setString(2, fiveDaysAgoStr);
                pstmt.setString(3, nowStr);
                rs = pstmt.executeQuery();    //获取查询到的结果集
                while (rs.next()) {
                    //封装Record对象
                    Record r = new Record();
                    r.setTaizhan_num(rs.getString(1));
                    r.setDate(rs.getTimestamp(2));
                    r.setTem(rs.getString(3));
                    r.setHum(rs.getString(4));
                    r.setPa(rs.getString(5));
                    r.setRain(rs.getString(6));
                    r.setWin_dir(rs.getString(7));
                    r.setWin_sp(rs.getString(8));
                    
                    //将时间转换成给定格式便于echarts的X轴日期坐标显示
                    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");             
                    String str = sdf.format(rs.getTimestamp(2));
                    r.setDateStr(str);
    //System.out.println(r.getTem()+" | "+r.getHum()+" | "+r.getPa()+" | "+r.getRain()+" | "+r.getWin_dir()+" | "+r.getWin_sp());                                            
                    records.add(r);        //将封装好的Record对象放入列表容器中
                }
                
            } catch (SQLException e) {
                System.out.println("查询出错,操作未完成!");
                e.printStackTrace();
            } finally {
                //查询结束后释放资源
                DBUtil.close(rs);
                DBUtil.close(pstmt);
                DBUtil.close(conn);
            }    
    //======================================连接数据库操作(完)============================================================================================         
            
            
            
          //将list中的对象转换为Json格式的数组
            Gson gson = new Gson();                    
            String json = gson.toJson(records);    
            
    //System.out.println(json);
            
            //将json数据返回给客户端
            response.setContentType("text/html; charset=utf-8");
            response.getWriter().write(json);
        }
    
    }
    复制代码

     

    alldata表部分数据截图:

    数据库截图

     

    Record类代码如下:

    复制代码
    package EchartsExample;
    
    import java.sql.*;
    
    /**
     * 封装气象数据信息
     * @author zhong
     *
     */
    public class Record {
        
        private String taizhan_num;    //台站名
        private String tem;            //温度
        private String hum;            //湿度
        private String pa;            //压强
        private String rain;        //雨量
        private String win_dir;        //风向
        private String win_sp;        //风速
        private String dateStr;        //观测日期(用于Echarts显示格式)
        private Timestamp date;        //观测日期(原始格式)
        
        /**
         * 获取观测日期(用于echarts图表展示);
         * @return 观测日期值
         */
        public String getDateStr() {
            return dateStr;
        }
    
        /**
         * 设置观测日期(用于echarts图表展示);
         * @param dateStr 待设置观测日期值
         */
        public void setDateStr(String dateStr) {
            this.dateStr = dateStr;
        }
        
        /**
         * 获取产生该观测记录的台站名称;
         * @return 台站名称
         */
        public String getTaizhan_num() {
            return taizhan_num;
        }
    
        /**
         * 设置产生该观测记录的台站名称;
         * @param taizhan_num 待设置台站名称
         */
        public void setTaizhan_num(String taizhan_num) {
            this.taizhan_num = taizhan_num;
        }
    
        /**
         * 获取温度;
         * @return 温度值
         */
        public String getTem() {
            return tem;
        }
    
        /**
         * 设置温度;
         * @param tem 待设置温度值
         */
        public void setTem(String tem) {
            this.tem = tem;
        }
    
        /**
         * 获取湿度;
         * @return 湿度值 
         */
        public String getHum() {
            return hum;
        }
    
        /**
         * 设置湿度;
         * @param hum 待设置湿度值
         */
        public void setHum(String hum) {
            this.hum = hum;
        }
    
        /**
         * 获取压强;
         * @return 压强值
         */
        public String getPa() {
            return pa;
        }
    
        /**
         * 设置压强;
         * @param pa 待设置压强值
         */
        public void setPa(String pa) {
            this.pa = pa;
        }
    
        /**
         * 获取雨量;
         * @return 雨量值
         */
        public String getRain() {
            return rain;
        }
    
        /**
         * 设置雨量;
         * @param rain 待设置雨量值
         */
        public void setRain(String rain) {
            this.rain = rain;
        }
    
        /**
         * 获取风向;
         * @return 风向值
         */
        public String getWin_dir() {
            return win_dir;
        }
    
        /**
         * 设置风向;
         * @param win_dir 待设置风向值
         */
        public void setWin_dir(String win_dir) {
            this.win_dir = win_dir;
        }
    
        /**
         * 获取风速;
         * @return 风速值
         */
        public String getWin_sp() {
            return win_sp;
        }
    
        /**
         * 设置风向;
         * @param win_sp 待设置风向值
         */
        public void setWin_sp(String win_sp) {
            this.win_sp = win_sp;
        }
    
        /**
         * 获取观测日期;
         * @return 观测日期
         */
        public Timestamp getDate() {
            return date;
        }
    
        /**
         * 设置观测日期; 
         * @param date 观测日期值
         */
        public void setDate(Timestamp date) {
            this.date = date;
        }
    
        
    }
    复制代码

     

    DBUitl类(数据库工具类)代码如下:

    复制代码
    package EchartsExample;
    
    
    import java.sql.*;
    
    import org.apache.tomcat.jdbc.pool.DataSource;
    import org.apache.tomcat.jdbc.pool.PoolProperties;
    
    /**
     * 数据库工具类(采用了tomcat jdbc pool)
     * @author zhong
     *
     */
    public class DBUtil {
        
        private static DataSource ds;
        
        static {
            //配置tomcat jdbc pool (连接池)
            PoolProperties p = new PoolProperties();
            p.setUrl("jdbc:sqlserver://localhost:1433; DatabaseName=weather");    //设置连接的url
            p.setDriverClassName("com.microsoft.sqlserver.jdbc.SQLServerDriver");    //载入数据库驱动
            p.setUsername("sa");    //用于远程连接的用户名
            p.setPassword("2003NianDeDiYiChangXue");    //密码
            p.setJmxEnabled(true);
            p.setTestWhileIdle(false);
            p.setTestOnBorrow(true);
            p.setValidationQuery("SELECT 1");
            p.setTestOnReturn(false);
            p.setValidationInterval(30000);
            p.setTimeBetweenEvictionRunsMillis(30000);
            p.setMaxActive(100);
            p.setInitialSize(10);
            p.setMaxWait(10000);
            p.setRemoveAbandonedTimeout(60);
            p.setMinEvictableIdleTimeMillis(30000);
            p.setMinIdle(10);
            p.setLogAbandoned(true);
            p.setRemoveAbandoned(true);
            p.setJdbcInterceptors(
              "org.apache.tomcat.jdbc.pool.interceptor.ConnectionState;"+
              "org.apache.tomcat.jdbc.pool.interceptor.StatementFinalizer");
            ds = new DataSource();
            ds.setPoolProperties(p);
        }
        
        private DBUtil() {}
        
        /**
         * 获取一个数据库连接(Connection);
         * @return Database Connection
         */
        public static Connection getConnection() {
            Connection conn = null;
            
            try {            
                conn = ds.getConnection();
            } catch (SQLException e) {
                e.printStackTrace();
            }
            
            return conn;
        }
        
        /**
         * 关闭传入的Connection;
         * @param conn 待关闭的Connection
         */
        public static void close(Connection conn) {
            try {
                if (conn != null) {
                    conn.close();
                    conn = null;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    
        /**
         * 关闭传入的Statement;
         * @param stmt    待关闭的Statement
         */
        public static void close(Statement stmt) {
            try {
                if (stmt != null) {
                    stmt.close();
                    stmt = null;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
        /**
         * 关闭传入的ResultSet;
         * @param rs    待关闭的ResultSet
         */
        public static void close(ResultSet rs) {
            try {
                if (rs != null) {
                    rs.close();
                    rs = null;
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        
    }
    复制代码

     

    ——————————————————————————我是小小分割线————————————————————————————————————

    关于远程连接(包括使用Eclipse连接)SqlServer2005我再多嘴两句:

    当确认连接的URL,驱动加载,用户名,密码都配置正确时,仍然抛出 java.lang.NullPointerException 的话,请打开开始菜单Microsoft SQL Server 2005软件目录下的SQL Server配置管理器:

    ①:启用SQL Server 2005网络配置 下的 SQLEXPRESS协议 内的 TCP/IP 协议,并右键TCP/IP协议选择属性,确保IP地址一栏最末的TCP端口为1433,具体见下图

    无标题

     

    ②:启用 SQL Native Client配置 下的 客户端协议 内的 TCP/IP 协议,并右键查看TCP/IP 属性,确保端口为1433,具体见下图

    无标题2

     

    ③:重新启动 SQL Server 2005服务 下的 SQL Server服务,详情见下图

    无标题3

    至此,应该就解决了java.lang.NullPointerException这个错误了。

    ————————————————————————我是小小分割线————————————————————————————————————

    让我们再回到原来的Echarts图表显示过程上,你可以试着在后台打印看看转换出的Json字符串,关于Json的使用这里我不再多言解释,具体可参考简单易懂的官方教程:http://www.w3school.com.cn/json/

     

    最后再贴一下实现效果吧:

    无标题44

    转载于:https://www.cnblogs.com/onetwo/p/5530333.html

    展开全文
  • Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,本文主要研究在随机数展示上的
  • 能够很方便的在实际项目中添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。  HighCharts的UI设计...
  • PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。PHP的作用是什么?能够干什么?PHP是一种...
  • 作者 |周萝卜来源 |萝卜大杂烩2019已经过去,回看编程语言20年真是风云变化!从 TIOBE 榜(热门榜)上来看,Java、C 和...编程语言霸榜动态排名数据可视化数据获取数据获取的部分,与上一篇 DB 篇很类似,都是解析 Jav...
  • 欢迎关注我的个人网站:www.sunier.cn <template> <body> <div> <el-button type="primary" @click="readJson()">读取JSON</el-button> </div> <div clas
  • Php是超文本预处理器(Hypertext Preprocessor)英文全称首字母的缩写,php从1995年发展到现在现在已经成为流行开发动态网站的程序开源服务器端语言。它融合了c、java、perl语言一些好的特点成为网站开发最佳的工具。...
  • 曲线 存档的:该项目曾经用于lopopolo的个人网站。 它已被的静态站点代替。 这就是的魔力。 hyperbo.la是Ryan Lopopolo的个人网站。 主要内容包括,和类似Twitter的。 hyperbo.la是使用构建的。 它可以通过,也...
  • 动态网站加速

    2012-08-16 11:58:25
    显著降低网页加载时间,提升用户体验! 蓝线: 没有 Zeta-TCP 时的平均响应时间曲线 黄线: 部署 Zeta-TCP 后的平均响应时间曲线 ...
  • 现在工业 SCADA 上或者电信网管方面用图表的特别多,虽然绝大...看到有一个网站上在卖的图表,感觉挺好看的,就用 HT for Web 3D 做了一个小例子,挺简单的,也挺好看的,哈哈~Demo 地址: http://www.hightopo.com...
  • 作者| 朱小五责编|郭芮之前大家遇到的最多的就是动态条形图,但大家对动态曲线图似乎也非常感兴趣,而且这种动态图在抖音、B站等视频网站都可以轻松获得不错的播放量。所以今天给大家简单讲...
  • 它的学习曲线几乎相当于Wordpress,工作流程和结构也几乎一样。 Jekyll与Wordpress最大不同的就是,没有数据库。但是体验上来说也算不上什么大差别。彻底摒弃数据库,这算是一种Jekyll式的新思路。因为你需...
  • 网站:www.quicklib.com QQ 群:5172183 一、本工具用于绘制资金曲线分时图。 每10s查询一次账户的动态权益,可用资金,静态权益(前一天结算权益,当天不会变化) 盈亏比例计算公式为: 盈亏比例 = 100*(动态...
  • Amcharts是一组Flash图表,你可以免费使用在你的网站和基于网络的产品(非开源)。 Amcharts可以从简单的CSV或XML文件提取数据,也可以从动态数据读取生成,比如PHP, .NET, Ruby on Rails和Perl,以及其他许多编程...
  • 这个网站可以动态的展现控制点不同而绘制的不同的曲线。而对于控制点的计算。。作者还是选择了百度一下毕竟数学不好:),这篇文章对于将多个点使用贝塞尔曲线连接时各个控制点的计算。具体算法有...
  • 使用TESS全帧图像为TESS寻找年轻和成熟的系外行星(THYME)小组等人员进行背景校正和动态调整光圈的代码,以制作FFI光曲线。 脚本中描述了设置和用法,但随时可以向Aaron Rizzuto寻求帮助。 该代码的实际作用是: ...
  • highchart动态添加数据

    2015-05-11 16:31:11
    highchart 动态添加数据  Highcharts是一个制作图表的纯Javascript类库,支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;使用需要导入jquery.js,highcharts.js以及exporting....
  • highchart 动态添加数据

    千次阅读 2015-03-20 14:34:08
    Highcharts是一个制作图表的纯Javascript类库,支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、... 由于很多网站的示例是静态数据,在找了很多资料后,整理了一份如何使用动态数据的代码
  • VRML(Virtual Reality Modeling Language)即虚拟现实建模语言。...结点可以通过实例得到复用,对它们赋以名字,进行定义后,即可建立动态的VR(虚拟世界)。是目前Internet上基于 WWW的三维互动网站制作的主流语言。
  • 昨天刚分享了一篇文章,关于制作动态图的,那是用现成的网站工具,可以直接生成动态图,大家还没看过的可以点击去看看:火爆全网的动态曲线图是怎么做的?原来这么简单。今天继续分享用Python代码运行的全球疫情趋势...
  • Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...
  • 本项目希望能利用交互式空间数据分析技术,使用flask + pyecharts构建简单的新冠肺炎疫情数据可视化交互分析平台,感知和预测疫情发展趋势与关键指标,分析社交媒体话题与情感的动态演变,对社会舆情进行态势感知。...
  • Highcharts应用--动态玫瑰图

    千次阅读 2017-05-10 18:08:29
    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 261
精华内容 104
关键字:

动态曲线网站