2

所以我一直在尝试 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"
}

我计划每秒钟左右更新一次这些值。这是我的 HTML 端代码：

<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 文档中缺少一些东西。

4

1 回答 1

3

我是 ZingChart 支持团队的一员，我很乐意帮助您解决这个问题。您需要在页面中配置大部分图表设置和对象，因此在 myChart 对象中。这意味着 crosshair-x、legend、plot 等……在页面中都应该是静态的，而不是通过 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 } ]

下面是我们在提要文章 HTTP 部分下的图表中使用的 feeds.php 脚本：

<?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'); ?>"
    }
]

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

如果我们的文档没有明确说明这一点，我深表歉意，我会尽快更新它们并添加更多说明。无论如何，我希望对你有帮助！如果您需要更多帮助，请告诉我。

于 2015-02-11T19:12:57.547 回答