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 相关文章推荐
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
Jquery性能优化详解
May 15 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
javascript实现完美拖拽效果
May 06 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
javascript实现放大镜功能
Dec 09 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php简单实现MVC
2015/02/05 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python协程的用法和例子详解
2017/09/09 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
红旗方阵解说词
2014/02/12 职场文书
广告创意求职信
2014/03/17 职场文书
高一学生期末评语
2014/04/25 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年导购员工作总结
2015/04/25 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers