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("异常！");
        }
  ...