highcharts动态获取数据

最新推荐文章于 2021-11-06 23:28:53 发布

qqCEM

最新推荐文章于 2021-11-06 23:28:53 发布

阅读量517

点赞数

文章标签： highcharts 数据可视化

本文链接：https://blog.csdn.net/qqcem/article/details/101515910

版权

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/themes/dark-unica.js"></script>
</head>

<body>
    <div id="container" style="min-width:400px;height:400px"></div>
    <script>
        setInterval(getGroupData(),1000 * 10);

        function getGroupData() {
            var json = {};

            var chart = {
                type: 'column'
            };
            var title = {
                text: '应用层服务器健康状况一览'
            };
            var subtitle = {
                text: ''
            };

            var yAxis = {
                min: 0,
                title: {
                    text: '数量(台)'
                }
            };
            var tooltip = {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} 台</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };
            var plotOptions = {
                column: {
                    borderWidth: 0
                }
            };


            //封装json对象
            json.chart = chart
            json.title = title
            json.subtitle = subtitle
            json.yAxis = yAxis
            json.tooltip = tooltip
            json.plotOptions = plotOptions

            //禁止异步请求
            $.ajaxSettings.async = false;
            $.getJSON('/countHealth/AH', {}, function (data, status) {

                var respJson = data;
                var xAxisJson = {}
                var categorieArr = []
                var healthdataArr = []
                var alldataArr = []
                
                //动态装配表格项目列表
                for (var key in respJson) {
                    categorieArr.push(key)
                    respValue = respJson[key]
                    valueArr = respValue.split("/")
                    healthdataArr.push(parseInt(valueArr[0]))
                    alldataArr.push(parseInt(valueArr[1]))
                    console.log("遍历respJson" + healthdataArr + "," + alldataArr)
                }

                xAxisJson = { categories: categorieArr, crosshair: true }
                var seriesArr = [{ name: '不健康', data: healthdataArr }, { name: '总体', data: alldataArr }]

                json.xAxis = xAxisJson
                json.series = seriesArr

                //动态装配容器
                $('#container').highcharts(json);
            });
        }


    </script>
</body>

</html>

qqCEM

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
highcharts动态获取数据

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico"> <meta name="viewport" co...
复制链接

扫一扫