Zingchart 实时数据馈送

Posted 2023-02-26

【中文标题】Zingchart 实时数据馈送

【英文标题】：Zingchart real time data feed

【发布时间】：2019-08-05 05:38:10

【问题描述】：

我有这个 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
      ,

【参考方案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>