Zingcharts 实时提要不呈现图表

Question

所以我一直在尝试 ZingCharts，总的来说我非常喜欢它。但现在我正在尝试创建实时提要，但 documentation 并不是那么清楚。我正在尝试使用 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 文档中缺少一些东西。

Answer 1

我是 ZingChart 支持团队的一员，我很乐意帮助您解决这个问题。您需要在页面中配置大部分图表设置和对象，因此在 myChart 对象中。这意味着 crosshair-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": []
    }
    ]
}

"refresh"对象也应该放在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 } ]

这是我们用于 the chart under the HTTP section of our feeds article 的 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'); ?>"
    }
]

此脚本还 returns 一个时间戳，它被注入到我们的 scale-x 对象中的一个空值数组中。您可以看到示例响应 here.

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

Zingcharts 实时提要不呈现图表

Zingcharts live feed not rendering chart

javascript

charts

json

visualization

zingchart