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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
vue设置默认首页的操作
Aug 12 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python实现维吉尼亚加密法
2019/03/20 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
门前三包责任书
2014/04/15 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
分公司经理任命书
2014/06/05 职场文书
党建目标管理责任书
2014/07/25 职场文书
辞职信的写法
2015/02/27 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
PHP命令行与定时任务
2021/04/01 PHP