jquery, highcharts, Ajax读取json数据

最新推荐文章于 2021-08-05 17:08:38 发布

我的世界有个L

最新推荐文章于 2021-08-05 17:08:38 发布

阅读量2.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/lcxlxm/article/details/53379186

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>