当前位置: 澳门新濠3559 > 服务器运维 > 正文

下面是一个学生成绩走势demo,并且免费提供给个

时间:2019-11-29 04:05来源:服务器运维
Highcharts 官网: Highcharts官网示例: Highcharts官网文档:官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可。 下面是一个学生成绩走势demo: 复制代码代码如下: 前言

Highcharts 官网: Highcharts 官网示例: Highcharts 官网文档: 官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可。 下面是一个学生成绩走势demo: 复制代码 代码如下:

前言:第一次接触饼图,刚开始没有思路,后面在网上找了一下对比了一下,发现用highcharts插件去生成图表特别简单,用起来还是非常简单的,只需要后台返回相应的数据前台用json接收一下,就可以完美的实现了。

Highcharts使用简例及异步动态读取数据,highcharts异步

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

第一部分:在head之间加载两个JS库。

<script src="html/js/jquery.js"></script>
<script src="html/js/chart/highcharts.js"></script> 

可以到 下载,有相关教程和使用说明文档。

英文好的可以去官网:

第二部分:JS代码

//定义一个Highcharts的变量,初始值为null
var oChart = null;
//定义oChart的布局环境
//布局环境组成:X轴、Y轴、数据显示、图标标题
var oOptions = { 
 //设置图表关联显示块和图形样式
 chart: { 
  renderTo: 'container', //设置显示的页面块
  //type:'line'    //设置显示的方式
  type: 'column'
 },
 //图标标题
 title: { 
  text: '图表展示范例', //设置标题
  //text: null, //设置null则不显示标题
 },
 //x轴
 xAxis: {
  title: {
   text: 'X 轴 标 题'
  },
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 },
 //y轴
 yAxis: {
  title: { text: 'Y 轴 标 题' }, //设置Y轴标题关闭
 },
 //数据列
 series: [{
  data:[120,360,560,60,360,160,40,360,60,230,230,300]
  }] 
}; 
$(document).ready(function(){
 oChart = new Highcharts.Chart(oOptions);
 //异步添加第2条数据列
 LoadSerie_Ajax();
}); 
//异步读取数据并加载到图表
function LoadSerie_Ajax() { 
  oChart.showLoading(); 
  $.ajax({ 
   url : 'ajax/get_value.aspx',
   type : 'POST',
   dataType : 'json',
   async : false, //同步处理后面才能处理新添加的series
   contentType: "application/x-www-form-urlencoded; charset=utf-8", 
   success : function(rntData){
     var oSeries = {
     name: "第二条",
     data: rntData.rows1
    };
    oChart.addSeries(oSeries);
   }
  });
  oChart.hideLoading(); 
} 

第三部分:C#代码

Response.Clear();
Response.Write("{"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]}");
Response.End(); 
 输出的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 
 多条的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60],"rows2":[10,20,30,40,50,200,70,100,90,200,100,60]} 

第四部分:HTML页面代码

<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

下面给大家分享一段代码关于highcharts异步获取数据

页面异步代码

$(function () {
   var chart_validatestatics;
   $(document).ready(function () {
    var options_validatestatics = {
     chart: {
      renderTo: 'container_validatestatics',
      type: 'column'
     },
     title: {
      text: '验票分析'
     },
     subtitle: {
      text: 'tourol.cn'
     },
     xAxis: {
    },
    yAxis: {
     title: {
      text: '人数'
     }
    },
    plotOptions: {
     bar: {
      dataLabels: {
       enabled: true
      }
     }
    },
    tooltip: {
     formatter: function () {
      return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人';
     }
    },
    credits: {
     enabled: false
    },
    series: [{
     name: "验票用户",
     width: 3
    }]
   }
   $.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) {
    var xatrnames = [];
    var yvalidators = [];
    for (var i = 0; i < data.rows.length; i++) {
     xatrnames.push([
       data.rows[i].atrname
      ]);
     yvalidators.push([
       data.rows[i].atrname,
       parseInt(data.rows[i].nums)
      ]);
    }
    alert(xatrnames + yvalidators);
    options_validatestatics.xAxis.categories = xatrnames
    options_validatestatics.series[0].data = yvalidators;
    chart_validatestatics = new Highcharts.Chart(options_validatestatics);
   });
  });
 }); 

这里要注意的是:x轴数组定义好后,定义y轴数据的时候要把对应在x轴上的值也push到数组里,不然会造成无法显示的情况

对应的在ajaxhandler中,拼接字符串并返回即可

string json = "{"rows":[";
  for (int i = 0; i < datas.Rows.Count; i++)
  {
   json += "{"atrname":"" + datas.Rows[i]["name"] + "","nums":"" + datas.Rows[i]["nums"] + ""},";
  }
  json = json.TrimEnd(',');
  json += "]}";
  context.Response.Write(json);
  context.Response.Flush();
  context.Response.End(); 

Highcharts Example

一、先来个实体展示,让大家看看效果

图片 1

(效果还是美美的)

您可能感兴趣的文章:

  • 纯JAVASCRIPT图表动画插件Highcharts Examples
  • Highcharts 非常实用的Javascript统计图demo示例
  • JQuery Highcharts 动态生成图表的方法
  • 浅析jquery的js图表组件highcharts
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • PHP+mysql+Highcharts生成饼状图
  • HighCharts图表控件在ASP.NET WebForm中的使用总结(全)

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用...

二、要实现这个效果首先要去highcharts官网去下载你自己需要的图表

简单的介绍下Highcharts,Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。(下面是highcharts官网地址和demo)

HIghChartS官网:

HighCharts Demo:

图片 2

2.1引入相应的js文件才能实现页面效果

由于我在Web开发框架中,主要采用了MVC+EasyUI的方式,因包含的文件如下所示。(每个图表需要引得文件官网的demo里面都有)

图片 3

<script type="text/javascript" src="<%=basePath%>/view/report/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/grid.js"></script>
<script type="text/javascript" src="<%=basePath%>/view/report/exporting.js"></script>
 <script type="text/javascript" src="/view/report/jquery.min.js"></script>

 

 

 

<script type="text/javascript" src="<%=basePath%>/view/report/jquery.min.js"></script>
@*图表JS文件应用*@
<script type="text/javascript" src="<%=basePath%>/view/report/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/grid.js"></script>
<script type="text/javascript" src="<%=basePath%>/view/report/exporting.js"></script>

 

 三、图表的js代码

首先是官网下载下来的图表代码

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '2014 某网站上各个浏览器的访问量占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['其他',   0.7]
            ]
        }]
    });
});

改动后的样式,只需要把data换成动态的数组用json来接收

 var chart2=  Highcharts.chart('container1', {
            chart: {
                margin: [0, 0, 0, 0],
                width:300,
                padding:[0, 0, 0, 0],
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '各航站异常行李数量'
            },
           /* tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },*/
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '异常行李量',
                data: [ ]
            }]
        });

 

 我的ajax请求

 function getPieJson(){
          var data1 = [];
          $.ajax({
                type : "POST", // 提交方式
                url :servicefulPath + '/irregularBagReportTotal/pieChart',
                success : function(result){
                   var json = result.data;        
                   for ( var key in json) {
                    //通过遍历对象属性的方法,遍历键值对,获得key,然后通过 对象[key]获得对应的值
                       if (json.hasOwnProperty(key)) {
                        data1.push([key, json[key]]);
                    }
                   }
                   chart2.series[0].setData(data1);
             }
          });
      }

四,后台代码格式

(注明:每个的后台框架和条件都不一样,最重要的是返回一个map数据到前台就可以了)

    //饼图
    public Map<String, Object> pieChart(){
        Map<String, Object> map = new HashMap<String, Object>();
        StringBuffer sql = new StringBuffer("SELECT SUM (E .LOSE) AS lose,SUM (E .MISSHIPMENT) AS miss,");
        sql.append(" SUM (E .LEAKAGE_LUCK) AS leak,SUM (E . LESS) AS LESS,SUM (E .DAMAGED) AS damaged");
        sql.append(" FROM E_ABNOM_BAGGA_TRAN E");
        Query query = entityManager.createNativeQuery(sql.toString());//执行sql语句
        Object[] o =  (Object[])query.getResultList().get(0);
        IrregularBagReport count = new IrregularBagReport();
        //丢失
        if (o[0] == null) {
            count.setLost(BigDecimal.ZERO);
        } else {
            count.setLost((BigDecimal) o[0]);
        }
        //错运
        if (o[1] == null) {
            count.setMisshipMent(BigDecimal.ZERO);
        } else {
            count.setMisshipMent((BigDecimal) o[1]);
        }
        //漏运
        if (o[2] == null) {
            count.setLeakageLuck(BigDecimal.ZERO);
        } else {
            count.setLeakageLuck((BigDecimal) o[2]);
        }
        //少收
        if (o[3] == null) {
            count.setLess(BigDecimal.ZERO);
        } else{
            count.setLess( (BigDecimal) o[3]);
        }
        //破损
        if (o[4] == null) {
            count.setDamaged(BigDecimal.ZERO);
        } else {
            count.setDamaged((BigDecimal) o[4]);
        }
        map.put("丢失", count.getLost());
        map.put("错运", count.getMisshipMent());
        map.put("漏运",count.getLeakageLuck());
        map.put("少收", count.getLess());
        map.put("破损", count.getDamaged());
        return map;
    }

 

 综上所述,按照上面的步骤就能生成饼图了,欢迎大佬们评论留言。

 

编辑:服务器运维 本文来源:下面是一个学生成绩走势demo,并且免费提供给个

关键词: