Question

我尝试使用Zingchart实时绘制一些网络数据。我使用websockets将数据从扭曲的pyton服务器发送到Zingchart。有没有办法确定要更新的系列？例如，如果有这个系列：

 'series': [
    {
      'text': 'Serie 1',
      'values': []
    },
    {
      'text': 'Series 2',
      'values': []
    }
  ]

使用＆＃34;文字＆＃34;或另一个ID来识别要通过websockets发送的数据更新的系列？还可以从websocket动态创建系列吗？

Answer 1

嗯，这可能不适合你。

你可以在下面写代码;

zingchart.exec('myChart', 'appendseriesvalues', {
  plotindex : 0,
  values : [[time,newValue-20]]
});

zingchart.exec('myChart', 'appendseriesvalues', {
  plotindex : 1,
  values : [[time,newValue+10]]
});

关键是你可以设置plotindex属性的正确顺序;

我修改了下面the site的脚本来源，看看它是如何工作的。

这是一个完整的来源;

<html>

<head>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script>
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
  </script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
  <script>
    var myConfig = {
      gui: {
        contextMenu: {
          position: 'right',
          docked: true,
          alpha: 0.9,
          item: {
            textAlpha: 1
          },
          button: {
            visible: true
          }
        }
      },
      graphset: [{
        type: 'line',
        borderColor: "#cccccc",
        borderWidth: 1,
        borderRadius: 2,
        plot: {
          aspect: 'spline'
        },
        plotarea: {
          margin: 'dynamic'
        },
        utc: true,
        timezone: 9,
        title: {
          text: 'Uniform Step Time Series Line Chart',
          adjustLayout: true,
          align: 'left',
          marginLeft: '15%'
        },
        legend: {
          draggable: true,
          backgroundColor: 'transparent',
          header: {
            text: "Facility N",
            backgroundColor: '#f0f0f0'
          },
          marker: {
            visible: false
          },
          //item: {
          //  margin: '5 17 2 0',
          //  padding: '3 3 3 3',
          //  fontColor: '#fff',
          //  cursor: 'hand'
          //},
          verticalAlign: 'middle',
          borderWidth: 0
        },
        scaleX: {
          //minValue: 1484870400000, //set minValue timestamp
          //minValue: 1512018819470,
          //step: 'day', //set step for scale
          step: '30minute',
          //step: 'minute',
          maxItems: 7,
          itemsOverlap: true,
          zooming: true,
          transform: {
            type: 'date',
            all: "%d %M %Y<br>%g:%i:%s"
          }
        },
        preview: {
          adjustLayout: true,
          live: true
        },
        scaleY: {
          step: 50,
          label: {
            text: 'Sensor'
          },
          guide: {
            lineStyle: 'solid'
          }
        },
        crosshairX: {
          lineColor: '#555',
          plotLabel: {
            backgroundColor: '#fff',
            multiple: true,
            borderWidth: 2,
            borderRadius: 2,
          },
          marker: {
            size: 5,
            borderWidth: 1,
            borderColor: '#fff'
          }
        },
        tooltip: {
          visible: false
        },
        series: [{
          values: [],
          text: 'Sensor FC-456',
          legendItem: {
            backgroundColor: '#29A2CC',
            borderRadius: 2
          }
        }, {
          values: [],
          text: 'Sensor AB-265',
          legendItem: {
            backgroundColor: '#D31E1E',
            borderRadius: 2
          }
        }, {
          values: [],
          text: 'Sensor DC-445',
          legendItem: {
            backgroundColor: '#7CA82B',
            borderRadius: 2
          }
        }, {
          values: [],
          text: 'Sensor ER-985',
          legendItem: {
            backgroundColor: '#EF8535',
            borderRadius: 2
          }
        }]
      }]
    };

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

    //Set up of a websocket
    var ws = new WebSocket('ws://65.50.232.201:8888/', 'zingchart');
    //var ws = new WebSocket('ws://localhost:8080/examples/websocket/chartProgrammatic');
    //var ws = new WebSocket('ws://192.9.112.69:8080/examples/websocket/sychart');


    //Tell our internal server what to send.
    ws.onopen = function(){
        //console.log("########send##########");

        ws.send('zingchart.feed');
        ws.send('zingchart.push');
        ws.send('zingchart.getdata');
    }

    //Setup an event to call a ZingChart API Method to update our chart.
    ws.onmessage = function (e) {
        console.log("===== \n " + JSON.stringify(e.data));
        console.log("===== \n ");

        //var data = JSON.parse(e.data);
        var data = JSON.parse(e.data);
        var newValue = data['plot0'][1];
        var time = data['plot0'][0];

        //console.log("====> " + time);
        //console.log("====> " + newValue);

      zingchart.exec('myChart', 'appendseriesvalues', {
          plotindex : 0,
          values : [[time,newValue-20]]
      });

      zingchart.exec('myChart', 'appendseriesvalues', {
          plotindex : 1,
          values : [[time,newValue+10]]
      });

      zingchart.exec('myChart', 'appendseriesvalues', {
          plotindex : 2,
          values : [[time,newValue+150]]
      });

      zingchart.exec('myChart', 'appendseriesvalues', {
          plotindex : 3,
          values : [[time,newValue+200]]
      });

    };

    ws.onclose = function(event) { 
        console.log('Client notified socket has closed',event); 
    }; 


  </script>
</body>

</html>

输出如下;

我希望它会对你有所帮助。

在Zingchart中创建和更新多个系列

1 个答案: