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

<1>页面chart.html：

  1. <span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>highchart折线图</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.     <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  7.     <script src="highcharts.js"></script>
  8.     <script type="text/javascript">
  9.         var xset = [];//X轴数据集
  10.         var yset = [];//Y轴数据集
  11.         /*返回数据*/
  12.         function getData(){
  13.             $.getJSON('com/ChartServlet',function(data){
  14.                 $.each(data,function(i,item){
  15.                     $.each(item,function(k,v){
  16.                         xset.push(k);
  17.                         yset.push(v);
  18.                     });
  19.                 })
  20.                 console.log(xset);
  21.                 console.log(yset);
  22.                 //根据时间序列生成折线图
  23.                 showChart(xset,yset);
  24.             });
  25.         }
  26.         /*定义图表*/
  27.         function showChart(xset,yset){
  28.             var chart = new Highcharts.Chart({
  29.                 chart: {
  30.                     renderTo: 'linecontainer',
  31.                     type: 'line',
  32.                     marginRight: 130,
  33.                     marginBottom: 25
  34.                 },  
  35.  
  36.                 xAxis: {
  37.                     categories: xset
  38.                 },
  39.                 yAxis: {
  40.                     title: {
  41.                         text: '数据'
  42.                     },
  43.                     plotLines: [{
  44.                         value: 0,
  45.                         width: 1,
  46.                         color: '#808080'
  47.                     }]
  48.                 },
  49.                 tooltip: {
  50.                     formatter: function() {
  51.                             return '<b>'+ this.series.name +'</b><br/>'+
  52.                             this.x +': '+ this.y;
  53.                     }
  54.                 },
  55.                 legend: {
  56.                     layout: 'vertical',
  57.                     align: 'right',
  58.                     verticalAlign: 'top',
  59.                     x: -10,
  60.                     y: 100,
  61.                     borderWidth: 0
  62.                 },
  63.                 series: [{
  64.                     name: '随机时间序列',
  65.                     data: yset
  66.                 }]
  67.             });
  68.         }  
  69.  
  70.         //执行
  71.         getData();
  72.     </script>  
  73.  
  74.   </head>  
  75.  
  76.   <body>
  77.           <!-- 图表显示区 -->
  78.            <div id="linecontainer" style="width: 1200px; height: 300px"></div>
  79.   </body>
  80. </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. EOS多主机多节点环境配置

    本文使用了四台同网段的主机,第一台做为eosio创世用户使用,另外三台做为出块者节点使用,最终实现了EOS多主机多节点的配置.最后EOSIO创世用户不再出块,由选举出来的各个节点轮流出块,下面将介绍具 ...

  2. 问题：Tomcat启动产生错误严重: Error initializing endpoint java.lang.Exception

    1问题描述: Tomcat启动产生错误严重: Error initializing endpoint java.lang.Exception: Socket bind failed: [730048] ...

  3. day22作业详解

    1.面向对象作业1 2.作业详解 点击查看详细内容 #1. class Li(object): def func1(self): print('in func1') obj = Li() obj.fu ...

  4. PowerDesigner如何将字段的注释显示出来

    选定一个编辑的表,右键- >Properties- >Columns- >Customize Columns and Filter(或直接用快捷键Ctrl+U)- >Comme ...

  5. jdbc取出表名 名称

    package com.dataconnect.test.util; import java.sql.Connection; import java.sql.DatabaseMetaData; imp ...

  6. Vue源码学习之双向绑定

    首发地址:CJWbiu's Blog 原理: ‘当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.definePr ...

  7. 029 Divide Two Integers 两数相除

    不使用乘号,除号和取模符号将两数相除.如果溢出返回 MAX_INT.详见:https://leetcode.com/problems/divide-two-integers/description/ ...

  8. Spring AOP——Spring 中面向切面编程

    前面两篇文章记录了 Spring IOC 的相关知识,本文记录 Spring 中的另一特性 AOP 相关知识. 部分参考资料: <Spring实战(第4版)> <轻量级 JavaEE ...

  9. 【转】《Unity Shader入门精要》冯乐乐著 书中彩图

    为方便个人手机学习时候查阅,从网上转来这些彩图. 如属过当行为,联系本人删除. 勘错表 http://candycat1992.github.io/unity_shaders_book/unity_s ...

  10. 【Unity3D】用继承EditorUpdater类来实现Editor模式下的后台处理

    EditorWindow类的OnGUI函数只会在窗口焦点处于Editor窗口上的时候才会运行.如果希望焦点不在Editor窗口上的时候,它也能实时更新,可以实现以下方法: OnDestroy OnDe ...