Javascript Flot不接受“的系列配置”；动态地；创建图表_Javascript_Flot

Javascript Flot不接受“的系列配置”；动态地；创建图表

javascript

Javascript Flot不接受“的系列配置”；动态地；创建图表,javascript,flot,Javascript,Flot,下面的第二张图表应该有一条绿线和一个红点，就像第一张图表一样，但是它没有发生：此处图表图像：不幸的是，我无法发布图像，但示例非常简单，可以在浏览器中打开查看这是我的默认设置。html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Con

下面的第二张图表应该有一条绿线和一个红点，就像第一张图表一样，但是它没有发生：

此处图表图像：不幸的是，我无法发布图像，但示例非常简单，可以在浏览器中打开查看

这是我的默认设置。html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My Flot Sample</title>
    <link href="Content/examples.css" rel="stylesheet" />
    <script src="Scripts/jquery.js"></script>
    <script src="Scripts/jquery.flot.js"></script>
</head>
<body>
    <input id="Submit1" type="submit" value="submit"/>
    <div id="myPlot13" style="width:600px;height:300px"></div>
    <div id="myPlot24" style="width:600px;height:300px"></div>

    <script src="Scripts/default.js"></script>
</body>
</html>

var x = 0;
var y = 0;
var numPoints = 50;
var delay = 50;

var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];

var serie1 = {
    color: "#00FF00",
    data: d1,
    lines: {
        lineWidth: 0.5
    }
};

var serie2 = {
    color: "#00FF00",
    data: d2,
    lines: {
        lineWidth: 0.5
    }
};

var serie3 = {
    color: "#FF0000",
    data: d3,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var serie4 = {
    color: "#FF0000",
    data: d4,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var data13 = [serie1, serie3];
var data24 = [serie2, serie4];

var options = {
    grid: {
        backgroundColor: "#000000",
        color: "#FFFFFF"
    }
};

function init_data13() {
    for (x = 0; x < numPoints; x++) {
        y += (Math.random() - 0.5);
        d1.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d3.push([x, y]);
        }
    }
}

function getData24() {
    if (d2.length < numPoints) {
        y += (Math.random() - 0.5);
        d2.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d4.push([x, y]);
        }
        x++;
    }

    return [d2, d4];
}

init_data13();
$.plot("#myPlot13", data13, options);

var btn = document.getElementById('Submit1');
btn.onclick = addChart;

function addChart() {
    x = 0;
    y = 0;

    var somePlot = $.plot("#myPlot24", data24, options);

    function updatePlot() {
        somePlot.setData(getData24());
        somePlot.draw();
        somePlot.setupGrid();
        setTimeout(updatePlot, delay);
    }

    updatePlot();
}


我的弗洛特样品

这里是default.js:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My Flot Sample</title>
    <link href="Content/examples.css" rel="stylesheet" />
    <script src="Scripts/jquery.js"></script>
    <script src="Scripts/jquery.flot.js"></script>
</head>
<body>
    <input id="Submit1" type="submit" value="submit"/>
    <div id="myPlot13" style="width:600px;height:300px"></div>
    <div id="myPlot24" style="width:600px;height:300px"></div>

    <script src="Scripts/default.js"></script>
</body>
</html>

var x = 0;
var y = 0;
var numPoints = 50;
var delay = 50;

var d1 = [];
var d2 = [];
var d3 = [];
var d4 = [];

var serie1 = {
    color: "#00FF00",
    data: d1,
    lines: {
        lineWidth: 0.5
    }
};

var serie2 = {
    color: "#00FF00",
    data: d2,
    lines: {
        lineWidth: 0.5
    }
};

var serie3 = {
    color: "#FF0000",
    data: d3,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var serie4 = {
    color: "#FF0000",
    data: d4,
    points: {
        show: true,
        lineWidth: 0,
        fill: true,
        fillColor: "#FF0000",
        radius: 7
    }
};

var data13 = [serie1, serie3];
var data24 = [serie2, serie4];

var options = {
    grid: {
        backgroundColor: "#000000",
        color: "#FFFFFF"
    }
};

function init_data13() {
    for (x = 0; x < numPoints; x++) {
        y += (Math.random() - 0.5);
        d1.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d3.push([x, y]);
        }
    }
}

function getData24() {
    if (d2.length < numPoints) {
        y += (Math.random() - 0.5);
        d2.push([x, y]);

        if (x % 15 == 0 && x > 0) {
            d4.push([x, y]);
        }
        x++;
    }

    return [d2, d4];
}

init_data13();
$.plot("#myPlot13", data13, options);

var btn = document.getElementById('Submit1');
btn.onclick = addChart;

function addChart() {
    x = 0;
    y = 0;

    var somePlot = $.plot("#myPlot24", data24, options);

    function updatePlot() {
        somePlot.setData(getData24());
        somePlot.draw();
        somePlot.setupGrid();
        setTimeout(updatePlot, delay);
    }

    updatePlot();
}

var x=0；
var y=0；
var numPoints=50；
无功延迟=50；
var d1=[]；
var d2=[]；
风险值d3=[]；
var d4=[]；
变量系列1={
颜色：“00FF00”，
数据：d1，
线路：{
线宽：0.5
}
};
变量系列2={
颜色：“00FF00”，
数据：d2，
线路：{
线宽：0.5
}
};
变量系列3={
颜色：“FF0000”，
数据：d3，
要点：{
秀：没错，
线宽：0，
填充：是的，
fillColor:#FF0000“，
半径：7
}
};
变量系列4={
颜色：“FF0000”，
数据：d4，
要点：{
秀：没错，
线宽：0，
填充：是的，
fillColor:#FF0000“，
半径：7
}
};
var data13=[serie1，serie3]；
var data24=[serie2，serie4]；
变量选项={
网格：{
背景颜色：“000000”，
颜色：“FFFFFF”
}
};
函数init_data13（）{
对于（x=0；x0）{
d3.推力（[x，y]）；
}
}
}
函数getData24（）{
如果（d2.length0）{
d4.推力（[x，y]）；
}
x++；
}
返回[d2，d4]；
}
init_data13（）；
$.plot（“myPlot13”，数据13，选项）；
var btn=document.getElementById（'Submit1'）；
btn.onclick=addChart；
函数addChart（）{
x=0；
y=0；
var somePlot=$.plot（“myPlot24”，数据24，选项）；
函数updatePlot（）{
setData（getData24（））；
somePlot.draw（）；
setupGrid（）；
setTimeout（updatePlot，delay）；
}
updatePlot（）；
}

唯一的区别是，第二个图表是在单击“提交”按钮时“动态”创建的。

对此表示歉意，我现在明白了。请参阅，以获取可用的演示（实时更新）。我修改了

updatePlot（）

函数，如下所示：

function updatePlot() {
    // Destroy the current chart
    somePlot.shutdown();
    // Get the data with the new data point
    getData24();
    // Recreate the chart
    somePlot = $.plot("#myPlot24", data24, options);
    setTimeout(updatePlot, delay);
}

它通过调用

getData24（）

来计算下一个点，然后调用

$.plot

函数以使用新数据点重新创建图表

编辑

我们已经找到了另一种方法，不用创建一个全新的图表。您可以调用

getData24（）

函数，然后将

data24

作为参数传递给

somePlot.setData（）

请稍等

非常感谢您的回答。不幸的是，这并没有达到我想要的“实时”效果。如果您执行我的原始代码，您将看到图表是在单击“提交”按钮后“实时”生成的。您的更改取消了“实时”效果…抱歉，我现在明白了。我已经根据你的评论修改了我的答案OK。。。它正在为每一个新的点创建一个全新的图表。。。。而不是将新点设置到同一图表上。。。我相信这将是一个问题，但我现在把它作为答案，谢谢。只是用另一种方法更新了我的答案，而没有为每个点创建全新的图表是的，非常感谢。这里的根本问题是绘图配置链接到[serie2，serie4]，而不是[d2，d4]。因此，setData（）必须接收[serie2，serie4]作为输入，才能执行配置。从Flot网站的“Bugs”页面上的一个用户那里得到了这个答案。再次感谢。