将数据点动态添加到人力车图

2022-01-24 00:00:00 socket.io javascript coffeescript rickshaw

所以我正在使用 Rickshaw 图形库，我想知道如何动态添加点图表.

So I'm using the Rickshaw graphing library and I was wondering how to dynamically add points to a graph.

我有一个像这样实例化的图表:

I have a graph instantiated like this: 

        @seriesData = [ [], [], [] ]
        random = new Rickshaw.Fixtures.RandomData(150)


        for (var i = 0; i < 50; i++) {
            random.addData(self.seriesData)
        }


        @graph = new Rickshaw.Graph(
            element: document.getElementById("chart")
            width: 550
            height: 300
            renderer: 'area'
            series: [
                {
                    color: "#c05020"
                    data: self.seriesData[0]
                    name: 'One'
                }, {
                    color: "#30c020"
                    data: self.seriesData[1]
                    name: 'Two'
                }, {
                    color: "#2791d7"
                    data: self.seriesData[2]
                    name: 'Three'
                }
            ]
        )

        @graph.render()

        hoverDetail = new Rickshaw.Graph.HoverDetail(
            graph: self.graph
        )

        legend = new Rickshaw.Graph.Legend(
            graph: self.graph
            element: document.getElementById('legend')

        )

        shelving = new Rickshaw.Graph.Behavior.Series.Toggle(
            graph: self.graph
            legend: legend
        )

        axes = new Rickshaw.Graph.Axis.Time(
            graph: self.graph
        )
        axes.render()

我有这样的数据通过 socket.io 进入:

And I have data coming in through socket.io like this: 

    app.on('data',
        (one, two, three) =>
            // Dynamically add data points to graph
    )

我想知道如何将这三个点附加到图表中.我找不到这个库的任何好的文档.我知道它建立在 d3.js 之上，但我不确定如何将这些方法合并到我的图表中.

And I was wondering how to append these three points to the graph. I can't find any good documentation for this library. I know it's built on top of d3.js, but I'm not sure how to incorporate these methods into my graph.

任何帮助将不胜感激.

推荐答案

我设想了两种可以解决您的问题的方案:

I envision two scenario that could solve your question:

  • 使用固定窗口系列流式数据
  • 利用 javascript 中的数组通过引用传递这一事实.这里
    • 提供了一个演示
  • Using the fixed Window Series for Streaming Data
  • leveraging the fact that arrays in javascript are passed by reference. A demo is available here

.

var data = [
        {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "#c05020"
        }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "#30c020"
        }
];


var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    renderer: 'line',
    height: 300,
    width: 800,
    series: data
} );

var y_ticks = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );

graph.render();


$('button#add').click(function() {
    data.push({
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "#6060c0"
    });
    graph.update();
});

相关文章