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

来源：互联网发布：周星驰锵锵三人行知乎编辑：程序博客网时间：2024/05/22 02:26

用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