highcharts(1)------- 通过 Ajax 加载数据

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

小黑不是小黑

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

阅读量375

点赞数

分类专栏： highcharts

highcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用eval("("+data+")")解析json的方式加载数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>hcharts</title>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/data.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script>
        $(function () {
            var x = [];//X轴
            var y = [];//Y轴
            var xtext = [];//X轴TEXT
            var color = ["red", "blue", "yellow", "green", "black"];
            $.ajax({
                type: 'get',
                url: "../AjaxTools/test1.ashx?method=GetPa",//请求数据的地址
                success: function (data) {
                    var t1 = eval("(" + data + ")");
                    for (var key in t1.list) {
                        t1.list[key].y = parseInt(t1.list[key].htz);
                        xtext[key] = t1.list[key].hname;
                        t1.list[key].color = color[key];
                    }

                    var t2 = eval("(" + data + ")");
                    for (var key in t2.list) {
                        t2.list[key].y = parseInt(t2.list[key].hpg);
                        xtext = t2.list[key].hname;
                        t2.list[key].color = color[key];
                    }

                    var t3 = eval("(" + data + ")");
                    for (var key in t3.list) {
                        t3.list[key].y = parseInt(t3.list[key].hl);
                        xtext = t3.list[key].hname;
                        t3.list[key].color = color[key];
                    }
                    chart.series[0].setData(t1.list);//数据填充到highcharts上面
                    chart.series[1].setData(t2.list);//数据填充到highcharts上面
                    chart.series[2].setData(t3.list);//数据填充到highcharts上面
                },
                error: function (e) {
                }
            });
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column' //显示类型 柱形
                },
                title: {
                    text: '分布图' //图表的标题
                },
                xAxis: {
                    categories:xtext.valueOf()
                },
                yAxis: {
                    title: {
                        text: '数量' //Y轴的名称
                    },
                },
                series: [{ name: "htz"}, { name: "hpg" }, { name: "h1" }
                ]
            });
        });
    </script>
</head>

<body>
    <div id="container" style="min-width:400px;height:400px"></div>
    <div class="message"></div>
</body>
</html>

数据：

转成json数据格式：

data = "{"list":[{"hname":"114","htz":"1","hpg":"2","hl":"3"},{"hname":"154","htz":"4","hpg":"6","hl":"3"},{"hname":"34","htz":"4","hpg":"2","hl":"1"},{"hname":"3","htz":"1","hpg":"2","hl":"4"},{"hname":"67","htz":"2","hpg":"3","hl":"5"}]}"

结果：

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

小黑不是小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts(1)------- 通过 Ajax 加载数据

用eval("("+data+")")解析json的方式加载数据： hcharts $(function () { var x = [];//X轴 var y = [];//Y轴 var xte
复制链接

扫一扫

专栏目录