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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
ECMAScript6--解构
Mar 30 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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批量生成缩略图的代码
2008/07/19 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
脚本收藏iframe
2006/07/21 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Element Steps步骤条的使用方法
2020/07/26 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python处理cookie详解
2014/02/07 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Django admin组件的使用
2020/10/24 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
SQL中where和having的区别
2012/06/17 面试题
总经理秘书的岗位职责
2013/12/27 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
采购意向书范本
2014/03/31 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
MySQL分区表管理命令汇总
2022/03/21 MySQL