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

原创 2018年04月16日 11:24:18
<!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 ajax获取json对象动态生成报表生成 .

http://blog.csdn.net/wsk7860/article/details/8751061
  • Baple
  • Baple
  • 2014-11-11 16:23:13
  • 14402

jquery, highcharts, Ajax读取json数据

highcharts结合jquery和ajax的方法读取和展现json数据。先上代码和结果。 首先,给出相关的data.json文件中的json数据:{ "success": true, "...
  • lcxlxm
  • lcxlxm
  • 2016-11-28 16:06:57
  • 1110

Highcharts + jQuery + Servlet 实现从后台获取JSON实时刷新图表

不墨迹,直接上代码,亲测可用。
  • zhaizu
  • zhaizu
  • 2013-12-06 17:35:20
  • 11876

AJAX与highcharts的调用

本项目以SSH为基本框架,要根据数据库的数据动态生成图表,需要ajax的运用。首先需要掌握的是在SSH框架中的ajax的运用。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据...
  • yu573017320
  • yu573017320
  • 2015-02-27 21:43:21
  • 1377

HighCharts基本使用实例(入门)

HighCharts 摘要 HighCharts是目前最为流行的图表插件,应用范围广泛,目前支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等,并且还支持一些拓展的特殊图表,如:仪表图、极...
  • XIAyuzheng
  • XIAyuzheng
  • 2014-06-01 18:57:39
  • 2672

Highcharts ajax加载数据实例

这里我只给出重要代码 思路是先通过ajax请求数据库数据,返回回来数组,我这里以servlet为例。就知道url啥意思了。 $(function () { var le=new Array...
  • qq_22222499
  • qq_22222499
  • 2017-01-03 12:07:53
  • 1585

Highcharts AJAX JSON JQuery 实现动态数据交互显示图表

Highcharts AJAX JSON JQuery 实现动态数据交互显示图表
  • educast
  • educast
  • 2016-10-09 10:56:57
  • 1786

在Java中使用Highcharts+Ajax+Json生成动态饼图

1.由于HighCharts运行于JQuery,所以需要引入jQuery。JQuery HighCharts核心js文件Highcharts 导出功能需要引入的js导出功能 完整文件Hig...
  • TMaskBoy
  • TMaskBoy
  • 2016-05-31 22:03:44
  • 5713

highcharts图表使用ajax调用数据

使用 series.setData(data); 可是实现数据的重新指定!在highcharts.js文件中你可以查看他的一些方法! 物理内存 $(function () { functi...
  • lumengabc
  • lumengabc
  • 2013-12-09 10:58:29
  • 1128

highcharts项目笔记-通过Ajax json数据绘制图表

一、highcharts点击事件获取点击点的值 chart = new Highcharts.Chart({    plotOptions: {        series: {        ...
  • freshlover
  • freshlover
  • 2013-04-09 19:41:35
  • 13607
收藏助手
不良信息举报
您举报文章:highcharts用ajax获取json数据的入门案例
举报原因:
原因补充:

(最多只允许输入30个字)