Zingcharts实时提要未呈现图表

所以我一直在尝试ZingCharts，通常我喜欢它。但现在我正在尝试创建一个实时提要，文档并不完全清楚。我正在尝试使用HTTP用新值更新图表。我似乎需要一个页面来发送带有更新值的图表数据，这就是我正在做的。当我直接在浏览器中通过JSON时，该图表会正确呈现，但不是作为实时提要，它现在只有强调的文本正确地从/metrics_feed中提取并呈现图表的轮廓，但它都是灰色的。我通过HTTP发送的JSON是：

{
  "crosshair-x": {},
  "legend": {},
  "plot": {
    "valueBox": {
      "placement": "top",
      "type": "max, min",
      "visible": false
    }
  },
  "scaleX": {
    "label": {
      "text": "Metric count"
    }
  },
  "scaleY": {
    "label": {
      "text": "Metric value"
    }
  },
  "series": [
    {
      "text": "data point",
      "values": [
        -4.69283003950355,
        -4.692830039503548,
        -4.6928300395035505
      ]
    }
  ],
  "title": {
    "text": "metrics over time"
  },
  "tooltip": {},
  "type": "line"
}

我计划每隔一秒左右更新这些值

<head>
...
<script type="text/javascript">
var myChart = {"refresh":{
    "type":"feed",
    "transport":"http",
    "url":"/metrics_feed",
    "interval":1000
    }
};
    window.onload=function(){
        zingchart.render({
            id:"myChartDiv",
            data:myChart,
            height:600,
            width:"100%"
        });
    };
</script>
</head>
<body>
    <div id="myChartDiv"></div>
</body>

当我在那里复制直接的JSON而不是通过HTTP发送它时，这一切都会起作用，所以我想Zingcharts文档中缺少了一些东西。

我是ZingChart支持团队的成员，我很乐意帮助您解决这个问题。您需要在页面中配置大多数图表设置和对象，因此在myChart对象中也是如此。这意味着crossair-x、图例、绘图等在页面中都应该是静态的，而不是通过HTTP传递。在JSON对象中，为要传递到图表的每个序列在序列数组中创建空的序列对象。所以，如果你只绘制一个系列：

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
    {
        "values": []
    }
    ]
}

如果您要传递2个系列值：

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"series": [
    {
        "values": []
    },
    {
        "values": []
    }
    ]
}

"刷新"对象也应该放在myData对象中，位于顶层：

{
"type": "line",
"title": {
    "text": "metrics over time"
},
/* Additional objects (tooltip, legend, crosshair, etc...) omitted for brevity */
"refresh":{
    "type":"feed",
    "transport":"http",
    "url":"/metrics_feed",
    "interval":1000
},
"series": [
    {
        "values": []
    },
    {
        "values": []
    }
    ]
}

根据图表中需要的系列对象数量，将脚本配置为以以下格式传递值：

[ { "plot0" : 27, "plot1" : 34 } ]

以下是feeds.php脚本，我们在feeds文章的HTTP部分中使用该脚本：

<?php
$min = isset($_GET['min'])?intval($_GET['min']):0;
$max = isset($_GET['max'])?intval($_GET['max']):50;
$plots = isset($_GET['plots'])?intval($_GET['plots']):1;
?>
[
    {
        <?php
        for ($plot=0;$plot<$plots;$plot++) {
        ?>
        "plot<?php echo $plot; ?>" : <?php echo rand($min, $max); ?>,
        <?php
        }
        ?>
        "scale-x" : "<?php echo date('H:i:s'); ?>"
    }
]

这个脚本还返回一个时间戳，该时间戳被注入到我们的scalex对象中的一个空值数组中。您可以在此处看到示例响应。

如果我们的文档没有明确说明这一点，我很抱歉，我会很快更新并补充说明。不管怎样，我希望这对你有帮助！如果你需要更多的帮助，请告诉我。

相关内容

最新更新

热门标签：