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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
js 走马灯简单实例
Nov 21 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
微信小程序实现人脸识别
May 25 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 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
php实现mysql同步的实现方法
2009/10/21 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
求职信标题怎么写
2014/05/26 职场文书
人事专员岗位说明书
2014/07/29 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
山楂树之恋观后感
2015/06/11 职场文书
红与黑读书笔记
2015/06/29 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers