Question

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

在此处设置图片：很遗憾，我无法发布图片，但样本非常简单，可以在浏览器中打开以查看图片。

这是我的default.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>

这里是default.js：

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();
}

唯一的区别是，当点击 SUBMIT 按钮时，“动态”创建第二个图表。

Answer 1

道歉，我现在明白了。有关工作演示（实时更新），请参阅here。我修改了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()

function updatePlot() {
    // Add the next data point
    getData24();
    // Pass the data to the existing chart (along with series colours)
    somePlot.setData(data24);
    somePlot.draw();
    somePlot.setupGrid();
    setTimeout(updatePlot, delay);
}

请参阅here获取小提琴

Flot不尊重“动态”创建的图表的系列配置

1 个答案: