一,我们先来看看异步加载数据的写法(这是使用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两种数据绑定方式和异步加载数据的使用的更多相关文章

  1. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  2. 新手教程:不写JS,在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  3. Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  4. js如何使浏览器允许脚本异步加载

    js如何使浏览器允许脚本异步加载 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应.这显然是很不好的体验,所以浏览器允许脚本异步加载,下面就是 ...

  5. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  6. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  7. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  8. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  9. winform异步加载数据到界面

    做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...

随机推荐

  1. tar shell zip

    tar          打包后生成的文件名全路径                    要打包的目录 tar -czPf xx/script.tar.gz                      ...

  2. flask之显示当地时间

    一:在网页上显示时间 flask-moment 程序扩展可以实现 pip install flask-moment # 未完待续

  3. 三星GT S7562 PIN 解锁方法

    三星GT S7562  PIN 解锁方法 请认真阅读完下文再进行操作,操作基本安全,请保证你手机电池有电续航超过1小时 首先把内存开和电话卡取出(以防万一数据丢失) 关机状态下: 同时按音量上下键 加 ...

  4. Spring---Spring Integration

    1.概述 1.1.Spring Integration  提供了  基于spring  的 EIP(Enterprise Integration Patterns,企业集成模式)的实现: 1.2.Sp ...

  5. RAC搭建---自己做

    一.本地磁盘是指你本身加上去的磁盘,只能本机使用的.共享磁盘是指可以多台机器同时读取写入.你做RAC就要用到共享存储: 二.ORC分区一般1G*3  数据分区5G*3  ,FRA分区一般5G*3  这 ...

  6. pip安装包出现timeout的解决办法

    今天安装django时老是出现timeout WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, sta ...

  7. OC + RAC (十) 常用宏

    . RAC(TARGET, [KEYPATH, [NIL_VALUE]]) :用于给某个对象的某个属性绑定. // 只要文本框文字改变,就会修改label的文字 RAC(self.labelView, ...

  8. vue框架搭建--移动端

    由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...

  9. tensorflow2 矩阵乘法问题

    tensorflow2再做矩阵相乘的时候如果维度有None,则矩阵相乘结果不对. 也不知道为什么,只能用矩阵对应元素相乘在相加的形式来实现矩阵相乘,这个困扰了我好几天,所以记下来. inputs_ti ...

  10. FFT IP核调用与仿真之FFT数学分析

    对于FFT这个IP核,我其实对它真的是又爱又恨,因为它真的耗费了我太多时间,但是随着研究的深入,遇到的问题一点点给消化解决,终于不用带着问题睡觉了,哈哈,有时候真的挺佩服自己的,遇到不懂的,不了解的, ...