G2 實時刷新流量監控圖

時間 2021-08-14

標籤 css html jquery web dom ssh ide code cdn htm 欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>G2 實時刷新 流量監控圖</title>
    <style>
     ::-webkit-scrollbar {
        display: none;
    }

    html,
    body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }

    .m-mount {
        margin: 100px 0 0 100px;
        width: 300px;
        height: 50px;
    }
    </style>
</head>

<body>
    <div id="mountNode" class="m-mount"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.8-beta.5/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
    <script>
    $(function() {
        var myAction = {},
            g2Buffer = [],
            g2Interval,
            myChart;

        $.extend(myAction, {
            initChart: function() {
                myChart = new G2.Chart({
                    container: 'mountNode',
                    width: 300,
                    height: 50,
                    forceFit: false,
                    animate: false,
                    padding: [5, 5, 5, 5],
                });
                myChart.source([]);
                myChart.axis('value', {
                    label: null,
                    tickLine: null
                });
                myChart.axis('year', {
                    label: null,
                    subTickCount: 3,
                    subTickLine: {
                        length: 2,
                        stroke: '#545454',
                        lineWidth: 1
                    },
                    tickLine: {
                        length: 2,
                        lineWidth: 1,
                        stroke: '#545454'
                    }                    
                });
                myChart.tooltip({
                    crosshairs: {
                        type: 'line'
                    }
                });
                myChart.area().position('year*value');
                myChart.line().position('year*value').size(2);
                myChart.render();
            },
            g2ChartData: function(data) {
                var data = [];
                for (var i = 0; i < 1000; i++) {
                    var temp = {};
                    temp.value = parseInt(90 * Math.random()) + 10;
                    data.push(temp);
                }

                for (var i = 0; i < data.length; i++) {
                    g2Buffer.push(data[i]);
                }
            },
            g2ChartAuto: function() {
                clearInterval(g2Interval);
                setInterval(function() {
                    if (g2Buffer.length > 20) {
                        var temp = g2Buffer.slice(0, 20);
                        for (var i = 0; i < temp.length; i++) {
                            temp[i].year = i;
                        }
                        myChart.changeData(temp);
                        g2Buffer.shift();
                    }
                }, 1000);
            },
        });

        var init = function() {
            myAction.initChart();
            myAction.g2ChartData();
            myAction.g2ChartAuto();
        }();
    })
    </script>
</body>

</html>