整理一份完整的例子，以供参考：

<1>页面chart.html：

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>highchart折线图</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

    <script src="highcharts.js"></script>

    <script type="text/javascript">

        var xset = [];//X轴数据集

        var yset = [];//Y轴数据集

        /*返回数据*/

        function getData(){

            $.getJSON('com/ChartServlet',function(data){

                $.each(data,function(i,item){

                    $.each(item,function(k,v){

                        xset.push(k);

                        yset.push(v);

                    });

                })

                console.log(xset);

                console.log(yset);

                //根据时间序列生成折线图

                showChart(xset,yset);

            });

        }

        /*定义图表*/

        function showChart(xset,yset){

            var chart = new Highcharts.Chart({

                chart: {

                    renderTo: 'linecontainer',

                    type: 'line',

                    marginRight: 130,

                    marginBottom: 25

                },  

                xAxis: {

                    categories: xset

                },

                yAxis: {

                    title: {

                        text: '数据'

                    },

                    plotLines: [{

                        value: 0,

                        width: 1,

                        color: '#808080'

                    }]

                },

                tooltip: {

                    formatter: function() {

                            return '<b>'+ this.series.name +'</b><br/>'+

                            this.x +': '+ this.y;

                    }

                },

                legend: {

                    layout: 'vertical',

                    align: 'right',

                    verticalAlign: 'top',

                    x: -10,

                    y: 100,

                    borderWidth: 0

                },

                series: [{

                    name: '随机时间序列',

                    data: yset

                }]

            });

        }  

        //执行

        getData();

    </script>  

  </head>  

  <body>

          <!-- 图表显示区 -->

           <div id="linecontainer" style="width: 1200px; height: 300px"></div>

  </body>

</html></span>

highcharts与ajax的应用的更多相关文章

  1. Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图

    上个图给大家看下效果. 点击  查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程 ...

  2. highcharts.js两种数据绑定方式和异步加载数据的使用

    一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...

  3. asp.net中绘制大数据量的可交互的图表

    在一个asp.net项目中要用到能绘制大数据量信息的图表,并且是可交互的(放大.缩小.导出.打印.实时数据),能够绘制多种图形. 为此进行了多方调查预研工作,预研过微软的MsChart图表组件.基于j ...

  4. 数据分析画图,使用原生sql查询数据

    1.使用工具 https://www.hcharts.cn/ http://echarts.baidu.com/ 2.子表查询 id 创建时间 内容 处理者 1 2017-02-01 11:11 1 ...

  5. [django]django+post+ajax+highcharts使用方法

    直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): ti ...

  6. 用ajax动态获取数据显示在highcharts上

    html代码(index.html) <html><head> <meta charset="UTF-8" /> <title>Hi ...

  7. Django ajax MYSQL Highcharts<1>

    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...

  8. highcharts联合jquery ajax 后端取数据

    Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图 ...

  9. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

随机推荐

  1. Retina显示屏-揭秘移动端的视觉稿通常会设计为传统PC的2倍

    一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. reti ...

  2. 如何顺畅使用sourcetree可视化工具

    http://www.360doc.com/content/17/0711/10/11253639_670493403.shtml sourcetree软件下载 下载地址:https://www.so ...

  3. POJ3696 The Luckiest Number 欧拉定理

    昨天终于把欧拉定理的证明看明白了...于是兴冲冲地写了2道题,发现自己啥都不会qwq 题意:给定一个正整数L<=2E+9,求至少多少个8连在一起组成正整数是L的倍数. 这很有意思么... 首先, ...

  4. 读书笔记 - 《梦想与浮沉：A股十年上市博弈》

    拿到这本书是个很偶然的事件.有几本软件业书由于太老已经绝版,偶然想到小区的图书馆自动借阅机和读者证的预借功能,就兴冲冲的跑去尝试.没想到预借只能在网页上进行,就随手从机器里借了这本书.没想到细观之下让 ...

  5. Spring Security方法级别授权使用介绍

    1.简介 简而言之,Spring Security支持方法级别的授权语义. 通常,我们可以通过限制哪些角色能够执行特定方法来保护我们的服务层 - 并使用专用的方法级安全测试支持对其进行测试. 在本文中 ...

  6. UICollectionView笔记2

    WWDC 2012 Session笔记——219 Advanced Collection Views and Building Custom Layouts 这是博主的WWDC2012笔记系列中的一篇 ...

  7. synchronized重入后抛出异常，锁释放了吗

    synchronized: 用于同步方法或者代码块,使得多个线程在试图并发执行同一个代码块的时候,串行地执行.以达到线程安全的目的. 允许重入: 在多线程的时候是这样的,但是对于单线程,是允许重入的, ...

  8. IO字节流。

    字节输出流: java.io.OutputStream :抽象类,是表示输出字节流的所有类的父类. java.io.FileOutputStream extends OutputStream: 文件字 ...

  9. tomcat的备份脚本

    reference:Crontab的20个例子  先科普一下date的使用方法,在sh脚本中经常会使用得到 date -d<字符串>:显示字符串所指的日期与时间.字符串前后必须加上双引号: ...

  10. juypter-notebook安装配置

    juypter-notebook安装配置 Table of Contents 1. jupyter notebook概述 2. jupyter notebook安装 3. 在jupyter noteb ...