highCharts的开发应用

最新推荐文章于 2024-07-17 17:46:08 发布

岁月忐忑如歌

最新推荐文章于 2024-07-17 17:46:08 发布

阅读量279

点赞数 1

分类专栏：前端框架

本文链接：https://blog.csdn.net/weixin_40393061/article/details/82924784

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>