highcharts用ajax获取json数据的入门案例

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <title>http://blog.csdn.net/ime33 AJAX异步请求数据</title>  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../WebRoot/WEB-INF/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../WebRoot/WEB-INF/js/highcharts.js"></script>  
        <script type="text/javascript" src="../WebRoot/WEB-INF/js/exporting.js"></script>  
        <script type="text/javascript" src="../WebRoot/WEB-INF/js/dark-unica.js"></script>  
        <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: '金额 (元)'  
                        },  
                        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'  
                        }   
                    },  
                    credits: {   
                        enabled: false       
                    },  
                    series: []  
                }  
                var oChart = null;  
                oChart = new Highcharts.Chart(options);  
                Load_SeriesData();  
              function Load_SeriesData(){  
                   oChart.showLoading("Loading....");   
                    $.ajax({  
                        type : 'GET',    
                        url : '../WebRoot/WEB-INF/json/data.json',  
                        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>  
    </head>  
    <body>  
        <div id="container" style="min-width:400px;height:400px"></div>  
    </body>  
</html> 

---json部分:

[
        {
            "name" : "微信",
               "arc" : [ 0,0,0,0,0,0,0,0,0,0,9900,0]    
        },
        {
            "name" : "支付宝",
            "arc" : [ 0,0,0,0,0,0,0,0,0,20000,0,1100]
        }]

阅读更多
个人分类: highcharts获取json
下一篇highcharts折线图通过ajax异步获取服务器处理过的数据
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭