如何为 Flot 图创建动态数据系列？答案

【问题标题】：How to create dynamic data series for Flot graph?如何为 Flot 图创建动态数据系列？
【发布时间】：2012-02-24 06:57:12
【问题描述】：

我需要为浮动图创建一个动态数据系列。我的 x 轴是时间，y 轴是计数。

我需要显示 5 个不同颜色的图表。我将如何为 Flot 提供数据系列。

【问题讨论】：

标签： javascript graph flot series

【解决方案1】：

这是一个使用时间作为 X 轴的 5 个具有 5 种不同颜色的图表的示例。点击链接更新数据系列和图表。

<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>

<div id="graph_1" style="width:300px;height:100px;"></div>
<div id="graph_2" style="width:300px;height:100px;"></div>
<div id="graph_3" style="width:300px;height:100px;"></div>
<div id="graph_4" style="width:300px;height:100px;"></div>
<div id="graph_5" style="width:300px;height:100px;"></div>

<script>
// Initialize the data to be graphed
var data = new Array();
data[0] = new Array();
data[1] = new Array();
data[2] = new Array();
data[3] = new Array();
data[4] = new Array();

var ticks = new Array();

draw_graphs();

// Draw the graphs
function draw_graphs() {
    $.plot($("#graph_1"), [{data:data[0],color:1}],{ xaxis: { mode: "time" }});
    $.plot($("#graph_2"), [{data:data[1],color:2}],{ xaxis: { mode: "time" }});
    $.plot($("#graph_3"), [{data:data[2],color:3}],{ xaxis: { mode: "time" }});
    $.plot($("#graph_4"), [{data:data[3],color:4}],{ xaxis: { mode: "time" }});
    $.plot($("#graph_5"), [{data:data[4],color:5}],{ xaxis: { mode: "time" }});
}

// Update the data
function change_data(n) {
    d = new Date();
    data[n].push([d.getTime(),n]);
    draw_graphs();
}

</script>

<a href="#" onclick="change_data(0)">Update 1</a><br>
<a href="#" onclick="change_data(1)">Update 2</a><br>
<a href="#" onclick="change_data(2)">Update 3</a><br>
<a href="#" onclick="change_data(3)">Update 4</a><br>
<a href="#" onclick="change_data(4)">Update 5</a><br>

您还可以使用 Updating Graphs with AJAX 和 Time 上的 flot 示例页面

【讨论】：