Question

我被困在如何从我的数据源输入实时int值并放入flot图表中！我目前的问题是我似乎无法想象如何改变x和y轴。关于它如何工作的数据或想法是，我将有一个每隔一秒提供一个值的源，我需要做的就是绘制图形。

Here's is the link to the image of the graph look like

这是我的代码我的问题是如何将getRandomData（）方法更改为我的数据，每秒只提供一个值。

示例我有一个数据var energy = 10;所以图表假设保持10直到出现新值

感谢抱歉任何不好的英语

    $(function() {

        /*
         * Flot Interactive Chart
         * -----------------------
         */
        // We use an inline data source in the example, usually data would
        // be fetched from a server
        var data = [], totalPoints = 100;
        function getRandomData() {

            if (data.length > 0)
                data = data.slice(1);

            // Do a random walk
            while (data.length < totalPoints) {

                var prev = data.length > 0 ? data[data.length - 1] : 50,
                        y = prev + Math.random() * 10 - 5;

                data.push(y);
            }

            // Zip the generated y values with the x values
            var res = [];
            for (var i = 0; i < data.length; ++i) {
                res.push([i, data[i]]);
            }
            console.log(res);
            return res;
        }

        var interactive_plot = $.plot("#interactive", [getRandomData()], {
            grid: {
                borderColor: "#f3f3f3",
                borderWidth: 1,
                tickColor: "#f3f3f3"
            },
            series: {
                shadowSize: 0, // Drawing is faster without shadows
                color: "#3c8dbc"
            },
            lines: {
                fill: true, //Converts the line chart to area chart
                color: "#3c8dbc"
            },
            yaxis: {
                show: true
            },
            xaxis: {
                show: false
            }
        });

        var updateInterval = 500; //Fetch data ever x milliseconds
        var realtime = "on"; //If == to on then fetch data every x seconds. else stop fetching
        function update() {

            interactive_plot.setData([getRandomData()]);

            // Since the axes don't change, we don't need to call plot.setupGrid()
            interactive_plot.draw();
            if (realtime === "on")
                setTimeout(update, updateInterval);
        }

        //INITIALIZE REALTIME DATA FETCHING
        if (realtime === "on") {
            update();
        }
        //REALTIME TOGGLE
        $("#realtime .btn").click(function() {
            if ($(this).data("toggle") === "on") {
                realtime = "on";
            }
            else {
                realtime = "off";
            }
            update();
        });

Answer 1

仍然不确定我理解，但我会试一试。

将您的能量变量存储在以下功能的可访问范围内。在某个时间间隔内调用此函数并将能量变量推送到数据上并重绘绘图。如果您在其他地方更新能量变量，此函数将使用新值。

function update() {
  var addedData = interactive_plot.getData()[0].data; // get current data
  addedData.push([addedData.length, energy]); // add energy value
  interactive_plot.setData([addedData]); // redraw chart
  interactive_plot.setupGrid();
  interactive_plot.draw();
  setTimeout(update, updateInterval);
}

这里是example。

我该如何格式化flot chart数据

1 个答案: