Zingchart 实时数据馈送

Question

我有这个 Zingchart（仪表类型），它使用 JS 显示从 1 到 100 的随机数。我需要通过 PHP 实现相同的目标。我怎样才能做到这一点？需要进行哪些必要的更改？

window.feed = function(callback) {
          var tick = {};
          tick.plot0 = Math.ceil(Math.random() * 100);
          callback(JSON.stringify(tick));

refresh:{  

          type:"feed",
          transport:"js",
          url:"feed()",
          interval:1000,
          resetTimeout:1000
      },

Answer 1

在 php 中工作的必要更改是设置一个 endpoint 来命中。如果你做了类似的事情：

window.feed = function(callback) {
          var tick = {};
          tick.plot0 = Math.ceil(Math.random() * <?php $phpValue ?>);
          callback(JSON.stringify(tick));

变量$phpValue 不适用于 Javascript 提要函数，因为该值只会在服务器编译 php ONCE 时打印一次。

那该怎么办？

您想添加一个正确的url 端点，它返回tick 格式。看起来像这样：

refresh: {
  type: 'feed',
  transport: 'http',
  url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=2',
  interval: 200
}

其中url返回如下数据结构：

[{
  plot0: 3,
  plot1: 18,
  'scale-x': "13:33:48" // optional scale-x argument to produce [x,y] plotting
}]

您可以在 http docs 上阅读更多信息。

解决方案

Demo here

// define top level feed control functions
function clearGraph() {
  zingchart.exec('myChart', 'clearfeed')
}
function startGraph() {
  zingchart.exec('myChart', 'startfeed');
}
function stopGraph() {
  zingchart.exec('myChart', 'stopfeed');
}

// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
  //clear start stop click events
  document.getElementById('clear').addEventListener('click', clearGraph);
  document.getElementById('start').addEventListener('click', startGraph);
  document.getElementById('stop').addEventListener('click', stopGraph);
 
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  const myConfig = {
    //chart styling
    type: 'line',
    globals: {
      fontFamily: 'Roboto',
    },
    backgroundColor: '#fff',
    title: {
      backgroundColor: '#1565C0',
      text: 'Real-Time Line Chart',
      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: 'http',
      url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=1',
      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'
    }]
  };

  // render chart with width and height to
  // fill the parent container CSS dimensions
  zingchart.render({ 
    id: 'myChart', 
    data: myConfig, 
    height: '100%', 
    width: '100%',
  }); 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

#myChart {
  margin: 0 auto;
  height: 380px;
  width: 98%;
  box-shadow: 5px 5px 5px #eee;
  background-color: #fff;
  border: 1px solid #eee;  
  display: flex;
  flex-flow: column wrap;
}
 
.controls--container {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.controls--container 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;
}
 
.controls--container button:hover {
  opacity: .9;
}
 
/*button movement*/
.controls--container button:active {
  border-width: 0 0 2px 0;
  transform: translateY(8px);
  opacity: 0.9;
}

.zc-ref { display:none; }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Blank Grid</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <!-- CHART CONTAINER -->
    <div id="myChart">
      <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    </div>
    <div class="controls--container">
       <button id="clear">Clear</button>
       <button id="stop">Stop</button>
       <button id="start">Start</button>
    </div>
  </body>
</html>