highcharts与ajax的应用
整理一份完整的例子，以供参考：
<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的应用的更多相关文章
- Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图
上个图给大家看下效果. 点击 查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程 ...
- highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...
- asp.net中绘制大数据量的可交互的图表
在一个asp.net项目中要用到能绘制大数据量信息的图表,并且是可交互的(放大.缩小.导出.打印.实时数据),能够绘制多种图形. 为此进行了多方调查预研工作,预研过微软的MsChart图表组件.基于j ...
- 数据分析画图,使用原生sql查询数据
1.使用工具 https://www.hcharts.cn/ http://echarts.baidu.com/ 2.子表查询 id 创建时间 内容 处理者 1 2017-02-01 11:11 1 ...
- [django]django+post+ajax+highcharts使用方法
直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): ti ...
- 用ajax动态获取数据显示在highcharts上
html代码(index.html) <html><head> <meta charset="UTF-8" /> <title>Hi ...
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- highcharts联合jquery ajax 后端取数据
Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图 ...
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
随机推荐
- 简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页
一.先在数据库中创建表格 在mysql中建users库并建立一个含有ID,username,email三个字段的user表 二.去vue的组件里面写页面的表单代码,注意form标签里的action需要 ...
- Boost多线程
一.概述 线程是在同一程序同一时间内允许执行不同函数的离散处理队列,这使得在一个长时间进行某种特殊运算的函数在执行时不阻碍其他的函数时变得十分重要.线程实际上允许同时执行两种函数,而这两者不必 ...
- screen命令常用参数使用
screen简要说明 screen 会话命令可以保持本地和服务器断开后,程序继续在服务器上运行,并且运行结束后,输出最后的结果.功能结果相当于 nohup command &,但是功能远比no ...
- Unity 行为树-基础
.前言 Unity里面的行为树又名BehaviorTree,最常用在NPC的敌人逻辑中. 二.基础说明(转载) 1.行为树的调用时间为每帧: 2.每个节点的状态只能下面3个中的其一:成功Success ...
- Linux上的errno和strerror
部分内容参考:https://www.douban.com/note/165931644/ 在Linux的api中: errno 是记录系统的最后一次错误代码.代码是一个int型的值,在errno.h ...
- java多线程关键字volatile的使用
java多线程关键字volatile的作用是表示多个线程对这个变量共享. 如果是只读的就可以直接用,写数据的时候要注意同步问题. 例子: package com.ming.thread.volatil ...
- 如何远程连接非默认端口SQL Server
SQL Server Management Studio建立远程SQL连接 连接的时候写: 127.0.0.1,49685\sqlexpress 记得使用逗号,不是冒号
- 使用Foxfly.Net读取STEP文件
Foxfly.Net是具备基本的几何建模和CAD文件读取功能.本文主要介绍读取STP/STEP文件的使用方法. 1.初始化 项目中引入FoxflyNet.dll程序集,在Program.cs中初始化建 ...
- Java并发编程的艺术，解读并发编程的优缺点
并发编程的优缺点 使用并发的原因 多核的CPU的背景下,催生了并发编程的趋势,通过并发编程的形式可以将多核CPU的计算能力发挥到极致,性能得到提升. 在特殊的业务场景下先天的就适合于并发编程. 比如在 ...
- 使用JAVA读写Properties属性文件
使用JAVA读写Properties属性文件 Properties属性文件在JAVA应用程序中是经常可以看得见的,也是特别重要的一类文件.它用来配置应用程序的一些信息,不过这些信息一般都是比较少的数 ...