JSFiddle - React, Tailwind, and code Playground

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.626/styles/kendo.flat.min.css">
<script src="http://cdn.kendostatic.com/2013.2.626/js/kendo.all.min.js"></script>
<body>
    <div id="example" class="k-content absConf">
        <div class="chart-wrapper" style="margin: auto;">
            <div id="chart"></div>
        </div>
    </div>
</body>

JavaScript

function createLineChart(chartID, sourceData) {
    var tempID = "#" + chartID;
    $(tempID).kendoChart({
        dataSource: sourceData,
        title: {
            text: "网络流量监控"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "line"
        },
        series: [{
            field: "UpLoagFlux",
            name: "发送"
        }, {
            field: "DownLoadFlux",
            name: "接收"
        }, {
            field: "InPacketLoss",
            name: "发送丢包"
        }, {
            field: "OutPacketLoss",
            name: "接收丢包"
        }],
        categoryAxis: {
            field: "DataTime",
            crosshair: {
                visible: true
            },
            //baseUnitStep: "auto",
            //autoBaseUnitSteps: {
            //minutes:[2]
            //},
            //type: "date",
            baseUnit: "days",
            labels: {
                rotation: -30,
                dateFormats: {
                    days: "hh:mm"
                }
            }
        },
        valueAxis: {
            type: "log",
            labels: {
                format: "{0}"
            },
            minorGridLines: {
                visible: true
            }
        },
        tooltip: {
            visible: true,
            shared: true,
            format: "N0"
        }
    });
}


var ajTime = $.ajax({
    url: 'http://202.121.66.51:6083/restsql-0.8.7/res/netfluxinfo?_limit=10&_offset=0&ServerID=2',
    type: 'get',
    dataType: 'json',
    success: function (data) {
        createLineChart("chart", data.netfluxinfos);
    },
    error: function () {
        alert("异常！");
    }
});