这篇文章主要介绍了highcharts.js数据绑定方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
<强>一,我们先来看看异步加载数据的写法(这是使用MVC的例子)
1 js写法
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/jquery-2.1.4.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/highcharts.js”祝辞& lt;/script>
& lt; div id="图"祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞//定义一个Highcharts的变量,初始值为null
var highCharts=零;//定义highCharts的布局环境//布局环境组成:X轴、Y轴,数据显示,图标标题
var oOptions={
图:{
renderTo:“图表”,//设置显示的页面块
类型:“列”//设置显示的方式
},
标题:{
文本:“//设置为空则不显示标题
},
plotOptions: {
专栏:{
pointPadding: 0,
borderWidth: 1、
groupPadding: 0,
影子:假
}
},
xAxis: {
tickWidth: 0,//标签:{//启用:假//禁止X轴的标题显示//},
类型:“类别”,
类别:[‘简’,‘2’,3月,4月,“可能”,“君”,7月,8月,9月,10月,11月,12月的)
},
桠溪:{
标题:{
文字:“
},//标签:{//启用:假//禁止Y轴的标题显示//},
},
传说:{
启用:假
},
学分:{
启用:假
},
提示:{
格式化程序:函数(){
返回“& lt; span>”+ this.series.name +“& lt;/span>: & lt; b>“+。y + & lt;/b>”+“& lt; span>分数范围& lt;/span>: & lt; b>“+(这一点。x + 10) * 10 +“-”+(这。x + 11) * 10 + & lt;/b>”
},
}
};
$(函数(){
highCharts=new Highcharts.Chart (oOptions);
highCharts.showLoading ();
. ajax({美元
url:“/home/getJosn2”,
类型:“文章”,
成功:功能(数据){
Data=https://www.yisu.com/zixun/eval((" +数据+ "));
var={系列
名称:“人数”,
数据:Data.rows,
颜色:# ddd的
};
highCharts.addSeries(系列);
}
}）;
highCharts.hideLoading ();
}）;
& lt;/script>
2 C #后台代码(MVC)
(HttpPost)
公共JsonResult getJosn2 ()
{
返回Json(“{\ \“行”:[120、360、560、60、360、160年,40岁的360年,{y: 150,颜色:“# 45 a9f4”}, 60岁,230年,230年,300年,60岁,230,230,300,300]}");
}
看我返回的json这个{y: 150,颜色:“# 45 a9f4”},是什么效果呢?如下图,高亮的那条
<强>二,有两种数据绑定的方法,这里使用固定数据来展示例子
第一种:
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/jquery-2.1.4.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/highcharts.js”祝辞& lt;/script>
& lt; div id="图"祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$(" #图”).highcharts ({
图:{
类型:“列”
},
标题:{
文字:“
},
plotOptions: {
专栏:{
pointPadding: 0,
borderWidth: 1、
groupPadding: 0,
影子:假
}
},
xAxis: {
tickWidth: 0,//标签:{//启用:假的//},
类型:“类别”
},
桠溪:{
标题:{
文字:“
},//标签:{//启用:假的//}
},
传说:{
启用:假
},
学分:{
启用:假
},
提示:{
格式化程序:函数(){
返回“& lt; span>”+ this.series.name +“& lt;/span>: & lt; b>“+。y + & lt;/b>”
},
},
系列:[{
名称:“人数”,
数据:[
(“简”,50),
2月,60,
[' 3 ',70),
{
名称:“4月”,
y: 150,
颜色:“# 45 a9f4”
},
(“可能”,140年),
),
颜色:# ddd的
})
}）;
}）;
& lt;/script>
我们可以同时在系列给X赋名字和值的一个json集合
第二种:
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/jquery-2.1.4.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/~/脚本/highcharts.js”祝辞& lt;/script>
& lt; div id="图"祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞
$(函数(){
$(" #图”).highcharts ({
图:{
类型:“列”
},
标题:{
文字:“
},
plotOptions: {
专栏:{
pointPadding: 0,
borderWidth: 1、
groupPadding: 0,
影子:假
}
},
xAxis: {
tickWidth: 0,//标签:{//启用:假的//},
类型:“类别”,
类别:[‘简’,‘2’,3月,4月,“可能”)
},
桠溪:{
标题:{
文字:“
},//标签:{//启用:假的//}
},
传说:{
启用:假
},
学分:{
启用:假
},
提示:{
格式化程序:函数(){
返回“& lt; span>”+ this.series.name +“& lt;/span>: & lt; b>“+。y + & lt;/b>”
},
},
系列:[{
名称:“人数”,
数据:[120、360、{y: 150,颜色:“# 45 a9f4”}, 560年,60岁),
颜色:# ddd的
})
}）;
}）;
& lt;/script>
