highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子)
1》js写法
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/highcharts.js"></script> <div id="chart"></div>
<script type="text/javascript"> //定义一个Highcharts的变量,初始值为null
var highCharts = null; //定义highCharts的布局环境
//布局环境组成:X轴、Y轴、数据显示、图标标题
var oOptions = {
chart: {
renderTo: 'chart', //设置显示的页面块
type: 'column' //设置显示的方式
},
title: {
text: '' //设置null则不显示标题
},
plotOptions: {
column: {
pointPadding: ,
borderWidth: ,
groupPadding: ,
shadow: false
}
},
xAxis: {
tickWidth: ,
//labels: {
// enabled: false //禁止X轴的标题显示
//},
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: ''
},
//labels: {
// enabled: false //禁止Y轴的标题显示
//},
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<span>' + this.series.name + '</span>: <b>' + this.y + '</b>'+ '<span>分数范围</span>: <b>' + (this.x + 10) * 10 + "-" + (this.x + 11) * 10 + '</b>'
},
}
}; $(function () {
highCharts = new Highcharts.Chart(oOptions);
highCharts.showLoading();
$.ajax({
url: '/home/getJosn2',
type: 'POST',
success: function (Data) {
Data = eval("(" + Data + ")");
var Series = {
name: "人数",
data: Data.rows,
color: '#ddd'
};
highCharts.addSeries(Series);
}
});
highCharts.hideLoading();
});
</script>
2》C#后台代码(MVC)
[HttpPost]
public JsonResult getJosn2()
{
return Json("{\"rows\":[120, 360, 560, 60, 360, 160, 40, 360, { y: 150, color: '#45a9f4' }, 60, 230, 230, 300, 60, 230, 230, 300, 300]}");
}
看我返回的json这个{ y: 150, color: '#45a9f4' }, 是什么效果呢?如下图,高亮的那条
二,有两种数据绑定的方法,这里使用固定数据来展示例子
第一种:
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/highcharts.js"></script> <div id="chart"></div>
<script type="text/javascript">
$(function () {
$('#chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
plotOptions: {
column: {
pointPadding: ,
borderWidth: ,
groupPadding: ,
shadow: false
}
},
xAxis: {
tickWidth: ,
//labels: {
// enabled: false
//},
type: 'category'
},
yAxis: {
title: {
text: ''
},
//labels: {
// enabled: false
//}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<span>' + this.series.name + '</span>: <b>' + this.y + '</b>'
},
},
series: [{
name: '人数',
data: [
['Jan', ],
['Feb', ],
['Mar', ],
{
name: "Apr",
y: ,
color: "#45a9f4"
},
['May', ], ],
color: '#ddd'
}]
});
});
</script>
我们可以同时在series给X赋名字和值的一个json集合
第二种:
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/highcharts.js"></script> <div id="chart"></div>
<script type="text/javascript">
$(function () {
$('#chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
plotOptions: {
column: {
pointPadding: ,
borderWidth: ,
groupPadding: ,
shadow: false
}
},
xAxis: {
tickWidth: ,
//labels: {
// enabled: false
//},
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: ''
},
//labels: {
// enabled: false
//}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<span>' + this.series.name + '</span>: <b>' + this.y + '</b>'
},
},
series: [{
name: '人数',
data: [, , { y: , color: "#45a9f4" }, , ],
color: '#ddd'
}]
});
});
</script>
我们X轴的标题和值也可以分开赋值,如上:
.
highcharts.js两种数据绑定方式和异步加载数据的使用的更多相关文章
- Highcharts 异步加载数据曲线图表
导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表
Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...
- js如何使浏览器允许脚本异步加载
js如何使浏览器允许脚本异步加载 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应.这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是 ...
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- 两种常用的jquery事件加载的方法 的区别
两种常用的jquery事件加载的方法 $(function(){}); window.onload=function(){} 第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- winform异步加载数据到界面
做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...
随机推荐
- linux基础知识(三)
添加用户 •useradd -d 家目录 -g 组名 -G 组集合(逗号间隔) -p 密码 -s 用户shell程序 用户名 •useradd -d /usr/local/nginx/ -g ngin ...
- openprocess打不开 如何读取exe路径描述
openprocess打不开 如何读取exe路径描述 openprocess打不开 如何读取exe路径描述 https://bbs.pediy.com/thread-210652.htm https: ...
- HDU 5386 Cover
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5386 题目大意:给一个初始矩阵(n×n).一个目标矩阵(n×n)和m个操作,要求找到一种操作顺序,使初 ...
- vue开发可复用组件
组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合. 开发可复用性的组件应遵循以下原则: 1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...
- JAVA中的反射机制 详解
主要介绍以下几方面内容 理解 Class 类 理解 Java 的类加载机制 学会使用 ClassLoader 进行类加载 理解反射的机制 掌握 Constructor.Method.Field 类的用 ...
- js arguments参数
在调用函数时,浏览器每次都会传递进两个隐含的参数: 1.函数的上下文对象 this 2.封装实参的对象 arguments - arguments是一个类数组对象, ...
- 108天南京银行完成不可能完成的新金融DevOps转型
在2018云栖大会南京峰会企业研发云专场,由南京银行研发管理负责人吴攀带来了“云效助力新金融DevOps转型——南京银行实践之路”的主题分享.首先对南京银行的研发规模与成长做了介绍,对“鑫云+”的诞生 ...
- C++创建对象时什么时候用*,什么时候不用*
用*, 表示创建的是一个指针对象,而指针的创建,必须初始化,C++中用new关键字开辟内存. 另外指针对象访问成员变量用-> , 非指针用. 就这么个原则 但是指针也可以不用-> 例如 ( ...
- C语言的结构体的具体作用是?
在实际问题中,一组数据往往具有不同的数据类型.例如,在学生登记表中,姓名应为字符型:学号可为整型或字符型:年龄应为整型:性别应为字符型:成绩可为整型或实型.显然不能用一个数组来存放这一组数据.因为数组 ...
- redis学习一 String数据类型
一:概述 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的 ...