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

伯先知

已于 2022-01-22 22:54:07 修改

阅读量520

点赞数 1

分类专栏： highcharts获取json 文章标签： json highcharts highcharts案例

于 2018-04-16 11:24:18 首次发布

本文链接：https://blog.csdn.net/u013189545/article/details/79958265

版权

highcharts获取json 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我的软件测试资源小站：www.qabujiaban.com

<!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]
       }]

伯先知

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
highcharts用ajax获取json数据的入门案例

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;http://blog.csdn.net/ime33 AJAX异步请求数据&lt;/title&gt; &lt;meta http-equiv="keywords" content="
复制链接

扫一扫