Question

我是这个简单的网页。该代码可以显示一个折线图，每500ms刷新一次带有随机值的值。

这是代码：

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8" />
    <title>ECG Real Time</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
    </script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .zc-ref {
            display: none;
        }

        #container {
            display: flex;
            flex-flow: column wrap;
        }

        #myChart {
            margin: 0 auto;
            height: 380px;
            width: 98%;
            box-shadow: 5px 5px 5px #eee;
            background-color: #fff;
            border: 1px solid #eee;
        }

        #container1 {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        button {
            margin: 40px;
            padding: 15px;
            background-color: #FF4081;
            border: none;
            color: #fff;
            box-shadow: 5px 5px 5px #eee;
            font-size: 16px;
            font-family: Roboto;
            cursor: pointer;
            transition: .1s;
        }

            button:hover {
                opacity: .9;
            }
            /*button movement*/

            button:active {
                border-width: 0 0 2px 0;
                transform: translateY(8px);
                opacity: 0.9;
            }
    </style>
</head>
<body>

    <div id="container">
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </div>
    <div id="container1">
        <button id="clear">Clear</button>
        <button id="stop">Stop</button>
        <button id="start">Start</button>
    </div>
    <script>
    var myConfig = {
      //chart styling
      type: 'line',
      globals: {
        fontFamily: 'Roboto',
      },
      backgroundColor: '#fff',
      title: {
        backgroundColor: '#1565C0',
        text: 'ECG Real Time',
        color: '#fff',
        height: '30x',
      },
      plotarea: {
        marginTop: '80px'
      },
      crosshairX: {
        lineWidth: 4,
        lineStyle: 'dashed',
        lineColor: '#424242',
        marker: {
          visible: true,
          size: 9
        },
        plotLabel: {
          backgroundColor: '#fff',
          borderColor: '#e3e3e3',
          borderRadius: 5,
          padding: 15,
          fontSize: 15,
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowDistance: 4,
        },
        scaleLabel: {
          backgroundColor: '#424242',
          padding: 5
        }
      },
      scaleY: {
        guide: {
          visible: false
        },
        values: '0:100:25'
      },
      tooltip: {
        visible: false
      },
      //real-time feed
      refresh: {
        type: 'feed',
        transport: 'js',
        url: 'feed()',
        interval: 500
      },
      plot: {
        shadow: 1,
        shadowColor: '#eee',
        shadowDistance: '10px',
        lineWidth: 5,
        hoverState: {
          visible: false
        },
        marker: {
          visible: false
        },
        aspect: 'spline'
      },
      series: [{
        values: [],
        lineColor: '#2196F3',
        text: 'Blue Line'
      }, {
        values: [],
        lineColor: '#ff9800',
        text: 'Orange Line'
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });

    //real-time feed random math function
    window.feed = function(callback) {
      var tick = {};
      tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
      tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
      callback(JSON.stringify(tick));
    };
    //clear start stop click events
    document.getElementById('clear').addEventListener('click', clearGraph);
    document.getElementById('start').addEventListener('click', startGraph);
    document.getElementById('stop').addEventListener('click', stopGraph);

    function clearGraph() {
      zingchart.exec('myChart', 'clearfeed')
    }

    function startGraph() {
      zingchart.exec('myChart', 'startfeed');
    }

    function stopGraph() {
      zingchart.exec('myChart', 'stopfeed');
    }
    </script>
</body>
</html>

现在使用此功能添加值：

window.feed = function(callback) {
      var tick = {};
      tick.plot0 = parseInt(10 + 90 * Math.random(), 10);
      tick.plot1 = parseInt(10 + 90 * Math.random(), 10);
      callback(JSON.stringify(tick));
    };

现在，我想自定义此功能，以将数据显示在T-SQL数据库中。现在如何从数据库中获取这些数据？

从网页从T-SQL数据库获取数据

0 个答案: