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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
webpack4简单入门实例
Sep 06 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
javascript实现左右缓动动画函数
Nov 25 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
yii插入数据库防并发的简单代码
2017/05/27 PHP
php中请求url的五种方法总结
2017/07/13 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python微信撤回监测代码
2019/04/29 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python logging设置level失败的解决方法
2020/02/19 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
公司年会主持词
2014/03/22 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
图书馆义工感想
2015/08/07 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server