highCharts的开发应用

highCharts是用来做图标的插件,基于jquery

效果图如下:
在这里插入图片描述

加载数据方式1如下

<html lang="en">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AJAX异步请求数据</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/highcharts.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/modules/exporting.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/themes/dark-unica.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>

        <script type="text/javascript">
            $(function () {
				//异步加载数据第一种方式
                var options={
                    chart:{
                        renderTo:'container',//报表显示在页面位置   container 为div定义的属性(id)
                        type:'line',//line column
                        //定义报表类型 例如line(直线图), pie (饼图), spline (曲线图), column(柱状图),area (面积图),scatter(点)
                    },
                    title:{
                        text:'书籍销量季度报表'
                    },
                    xAxis: {//x坐标要显示的数据
                    	categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                            '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        title: {
                            text: '数量 (本)'
                        },
                        plotLines: [{//表示为定义曲线报表中的(刻度线)或者叫做(定义的区间范围)
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {//表示为鼠标放在报表图中数据点上显示的数据信息
                        valueSuffix: '本'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    Loading:{
                            hideDuration: 1000,//淡出效果的持续时间(以毫秒为单位)
                            showDuration: 1000,//淡入效果的持续时间(以毫秒为单位)
                            labelStyle: {//加载标签的span的CSS样式
                                fontStyle: 'italic',
                                color:'red',
                                fontSize:"40px"
                            },
                            style: {//覆盖在绘图区的加载页面的样式
                                position: 'absolute', 
                                backgroundColor: 'white', 
                                opacity: 0.5, 
                                textAlign: 'center',
                                color:'red'
                            } 
                        },
                    series: [{},{},{}]//决定有多少条数据
                }
                var ctx = "${pageContext.request.contextPath}";
                var url = ctx + '/nodeAction.action?methodName=ListView';
                
                //var url = "data.json"
                $.getJSON(url,function(data) { 
                    var i,len=data.length;  
                    //console.log(data[0].name);       
                    for( i=0;i<len;i++){
                        //赋值 series
                        options.series[i].data = data[i].arc;    
                        options.series[i].name = data[i].name;
                        console.log(options.series[i].data);
                        //对报表X轴显示名称赋值
                        //options.xAxis.categories[i]=data[i].month;//可在json数据中添加月份添加
                    }    
                    var chart = new Highcharts.Chart(options);
                });
			});
        </script>
    </body>
</html>

加载数据方式2如下

<html lang="en">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AJAX异步请求数据</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/highcharts.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/modules/exporting.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/Highcharts-6.1.2/code/themes/dark-unica.js"></script>
    </head>
    <body>
        <!--[if lt IE 10]>
            <div class="browserupgrade">
            在线编辑代码s 目前只支持 IE10 以上的浏览器,为了更好的体验,建议使用谷歌、火狐、IE10+ 等主流浏览器访问本站!
            </div>
        <![endif]-->
        <div id="container" style="min-width:400px;height:400px"></div>

        <script type="text/javascript">
            $(function () {

// 异步加载数据第二种方式
                var options={
                    chart:{
                        renderTo:'container',
                        type:'line'//line column
                    },
                    title:{
                        text:'异步获取数据'
                    },
                    subtitle: {
                        text: '折线图',
                        x: -20
                    },
                    xAxis: {
                        categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                                     '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        title: {
                            text: '温度 (°C)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    Loading:{
                        hideDuration: 1000,//淡出效果的持续时间(以毫秒为单位)
                        showDuration: 1000,//淡入效果的持续时间(以毫秒为单位)
                        labelStyle: {//加载标签的span的CSS样式
                            fontStyle: 'italic',
                            color:'red',
                            fontSize:"40px"
                        },
                        style: {//覆盖在绘图区的加载页面的样式
                            position: 'absolute', 
                            backgroundColor: 'white', 
                            opacity: 0.5, 
                            textAlign: 'center',
                            color:'red'
                        } 
                    },
                    credits: { 
                        enabled: false     
                    },
                    series: []
                }
                var oChart = null;
                oChart = new Highcharts.Chart(options);
                
                var ctx = "${pageContext.request.contextPath}";
                var url = ctx + '/nodeAction.action?methodName=ListView';
                loadData();
                function loadData(){
                    oChart.showLoading("Loading...."); //显示加载
                    $.ajax({  
                        url : url,
                        type : 'POST',
                        dataType : 'json',
                        success : function(Data){
                            console.log(Data);
                            for(i=0; i<Data.length;i++){
                                var DataSeries = {
                                    name: Data[i].name,
                                    data: Data[i].arc
                                };
                                oChart.addSeries(DataSeries);
                            }
                            oChart.hideLoading("Loading....");//隐藏加载
                        }
                    });
                     
                }
});
        </script>

    </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值