Question

所以我一直在尝试ZingCharts，一般来说我喜欢一吨。但现在我正在尝试创建一个实时Feed，而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": []
    }
    ]
}

＆＃34;刷新＆＃34;对象也应该放在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'); ?>"
    }
]

此脚本还返回一个时间戳，该时间戳将注入到scale-x对象中的空值数组中。您可以看到示例回复here。

如果我们的文档没有说清楚，我道歉，我将很快更新它们。无论如何，我希望能帮到你！如果您需要更多帮助，请告诉我。

Zingcharts实时馈送不渲染图表

1 个答案: