highcharts.js数据绑定方式代码实例


Posted in Javascript onNovember 13, 2019

这篇文章主要介绍了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: 0,
        borderWidth: 1,
        groupPadding: 0,
        shadow: false
      }
    },
    xAxis: {
      tickWidth: 0,
      //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' }, 是什么效果呢?如下图,高亮的那条

highcharts.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">
  $(function () {
    $('#chart').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: ''
      },
      plotOptions: {
        column: {
          pointPadding: 0,
          borderWidth: 1,
          groupPadding: 0,
          shadow: false
        }
      },
      xAxis: {
        tickWidth: 0,
        //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', 50],
          ['Feb', 60],
          ['Mar', 70],
          {
            name: "Apr",
            y: 150,
            color: "#45a9f4"
          },
          ['May', 140],
          
        ],
        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: 0,
          borderWidth: 1,
          groupPadding: 0,
          shadow: false
        }
      },
      xAxis: {
        tickWidth: 0,
        //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: [120, 360, { y: 150, color: "#45a9f4" }, 560, 60],
        color: '#ddd'
      }]
    });
  });
</script>

我们X轴的标题和值也可以分开赋值,如上

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
vue prop属性传值与传引用示例
Nov 13 #Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 #Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
Jquery异步上传文件代码实例
Nov 13 #jQuery
解决ele ui 表格表头太长问题的实现
Nov 13 #Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 #Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 #Javascript
You might like
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
毕业自荐书
2013/12/09 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
入党自我评价优缺点
2014/01/25 职场文书
商业房地产广告语
2014/03/13 职场文书
岗位职责说明书
2014/05/07 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
新学期感想
2015/08/10 职场文书