jquery, highcharts, Ajax读取json数据

highcharts结合jquery和ajax的方法读取和展现json数据。先上代码和结果。
首先,给出相关的data.json文件中的json数据:

{
  "success": true,
  "code": "0",
  "msg": "",
  "data": {
    "AxisNames": [
      "日",
      "报单人次"
    ],
    "AxisUnit": [
      " ",
      " "
    ],
    "AxisData": [
      [
        "2016-11-22",
        "2016-11-23",
        "2016-11-24",
        "2016-11-25",
        "2016-11-26",
        "2016-11-27",
        "2016-11-28"
      ],
      [
        [
          5,
          0,
          1,
          1,
          1,
          0,
          0
        ]
      ]
    ],
    "legendData": [
      "报单人次"
    ],
    "totalNum": 30
  }
}

下面给出展示报表的html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Require JSON DATA</title>
    <title>动态获取数据</title>
    <script type="text/javascript" src="./jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./highcharts/highcharts.js"></script>
    <script type="text/javascript" src="./highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="./highcharts/modules/data.js"></script>
</head>
<body>
    <div id="container" style="width:550px;height:400px; margin: 0 auto"></div>
    <div class="message"></div>
    <script>
        $(function () {
            $.getJSON('data.json', function (data) {
                var _data = data.data;
                var AxisNames = _data.AxisNames, AxisUnit = _data.AxisUnit, AxisData = _data.AxisData,
                    legendData = _data.legendData, totalNum = _data.totalNum;
                $('#container').highcharts({
                    title: {
                        text: '报单顾客增长趋势图',
                        x: -20 //center
                    },
                    subtitle: {
                        align: "left",
                        text: '建档总人数:' + totalNum
                    },
                    xAxis: {
                        title: {
                            text: AxisNames[0]
                        },
                        categories: AxisData[0]
                    },
                    yAxis: {
                        title: {
                            text: AxisNames[1]
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '人'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: '报单人次',
                        data: AxisData[1][0]
                    }]
                });
            });

        });
    </script>
</body>
</html>

结果如下:
这里写图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值