使用指定的 x 和 y 值更新动态 Dojo 图表

Question

我正在构建一个需要动态更新折线图的网站。 为此，我正在使用 dojo 库，该库提供了实现这一目标所需的必要图表功能，完全基于他们网站上提供的这个示例：

http://dojotoolkit.org/documentation/tutorials/1.6/charting_advanced/
http://dojotoolkit.org/documentation/tutorials/1.6/charting_advanced/demo/store-series.html

这个例子向我展示了如何用新的 y 值更新图形，并将 x 的值加一。 我需要的是使用 (x,y) 的自定义值更新图表并绘制它，但我找不到这样做的方法。 我尝试直接在数据存储中强制 x 和 y 的值，但没有结果，图表将无法加载：

            // Initial data
            var data = [
                // This information, presumably, would come from a database or web service
                { id: 1, x:0, y:20, site: 1 },
                { id: 2, value: 16, site: 1 },
                { id: 3, value: 11, site: 1 },
                { id: 4, value: 18, site: 1 },
                { id: 5, value: 26, site: 1 },
                { id: 6, value: 19, site: 2 },
                { id: 7, value: 20, site: 2 },
                { id: 8, value: 28, site: 2 },
                { id: 9, value: 12, site: 2 },
                { id: 10, value: 4, site: 2 }
            ];


            // Create the data store
            // Store information in a data store on the client side
            var store = dojo.store.Observable(new dojo.store.Memory({
                data: {
                    identifier: "id",
                    label: "Users Online",
                    items: data
                }
            }));

Google 并没有给我更多帮助。 如何使用自定义 (x,y) 值对动态更新此数据存储？ 有没有其他方法可以做到这一点？

最好的问候

Answer 1

假设您使用文本输入更改了一些 (x,y) 值。解决方案很简单（如果我理解你的问题）：

dojo.connect(dijit.byId("someInputElement"), "onChange", 
                 function(){
                            chart.updateSeries("bla bla", new_data).render();
                            //new data is the data store with custom(x,y)
                          });

希望对你有帮助！

Answer 2

好的，这会有点长，我知道我迟到了 7 年，但这是我创建动态更新图表的代码。

    var start=1;
        var end=10;
        require([
            'dojo/on',
            'dojo',
            'dojo/ready',
            // Require the basic chart class
           "dojox/charting/Chart",
           // Require the theme of our choosing
           "dojox/charting/themes/MiamiNice",
           //     We want to plot Columns
           "dojox/charting/plot2d/Columns",
           // Require the highlighter
           "dojox/charting/action2d/Highlight",
           "dojo/store/Observable",
           "dojo/store/Memory",
           'dojox/charting/StoreSeries',
           //    We want to use Markers
           "dojox/charting/plot2d/Markers",
           //    We'll use default x/y axes
           "dojox/charting/axis2d/Default",
           // Wait until the DOM is ready
           "dojo/domReady!",
           "dojo/dom"
        ], function(on, dojo, ready, Chart, theme, ColumnsPlot, Highlight, ObservableStore, MemoryStore, StoreSeries) {
            ready(function() {
            // Define the data
           var data = [
            // This information, presumably, would come from a database or web service
            // Just hardcoded data for now.. Site is set to 2 when we want to hide an element
            { id: 1, value: 20, site: 1 },
            { id: 2, value: 16, site: 1 },
            { id: 3, value: 11, site: 1 },
            { id: 4, value: 18, site: 1 },
            { id: 5, value: 26, site: 1 },
            { id: 6, value: 19, site: 1 },
            { id: 7, value: 20, site: 1 },
            { id: 8, value: 28, site: 1 },
            { id: 9, value: 12, site: 1 },
            { id: 10, value: 4, site: 1 }
            ];

            // Create the data store
            // Store information in a data store on the client side
            var store = new ObservableStore(new MemoryStore({
            data: {
            idProperty: "id",
            label: "Users Online",
            items: data
            }
            }));
           // Create the chart within it's "holding" node
           var chart = new Chart("chartNode",{
            title: "Random Data(Sliding)",
            titlePos: "top",
            titleGap: 25,
            titleFont: "normal normal normal 15pt Arial",
            titleFontColor: "orange"
          });
           // Set the theme
           chart.setTheme(theme);
           // Add the only/default plot
           chart.addPlot("default", {
               type: ColumnsPlot,
               markers: true,
               gap: 5
           });
           // Add axes. We recreated x axis every time the user slides to change the values
           chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
           chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
           // Add the series of data
           chart.addSeries("y", new StoreSeries(store, { query: { site: 1 }, sort: { attribute: "id", ascending: true} }, "value"));
           // Highlight!
           new Highlight(chart,"default");
           // Render the chart!
           chart.render();
           // Forward button to slide forward adding a random item to the chart
           var forButton = dojo.byId("forward-btn");
           on (forButton, "click", function(evt){
            // console.log(start + ' ' + end);
            end += 1;
            var item = {
                id: end,
                value: Math.floor((Math.random() * 16) + 1),
                site: 1
            } 
             //hide starting element
            store.put({id: start,value: store.get(start).value,site: 2}, {overwrite: true});
            start+=1;
            //put the new value at the end of the store
            store.put(item, {overwrite: true});
            //recreated x axis
            chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
         }

            );
            //backButton to slide back towards the start. Same as forward, but reversing the effects
            var backButton = dojo.byId("backward-btn");
           on (backButton, "click", function(evt){    
               if(start>1){
                start-=1; 
                end-=1;
                // console.log(start + ' ' + end);
                store.put({id: start,value: store.get(start).value,site: 1}, {overwrite: true});
                store.put({id: end+1, value: store.get(end+1).value, site: 2}, {overwrite: true});
                store.query({site: 1},{sort: [{attribute: "id", ascending: true}]}).forEach(function(newItem){
                    store.remove(newItem.id);
                    store.add(newItem);
                    // console.log(newItem);
                })
                chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                    font: "normal normal 10pt Arial",
                labels: [{value: 1, text: start},
                   {value: 2, text: start+1},
                   {value: 3, text: start+2},
                   {value: 4, text: start+3},
                   {value: 5, text: start+4},
                   {value: 6, text: start+5},
                   {value: 7, text: start+6},
                   {value: 8, text: start+7},
                   {value: 9, text: start+8},
                   {value: 10, text: start+9},
                ]
           });
               }
               else{
                   //And a simple alert to inform the user that he can not go backwards anymore
                   alert('You hit the start of the data!');
               }
         }
            );
            });
        });

在 html 中，我有两个带有 id 的按钮，如按钮元素中所述，还有一个用于实现图表的 chartNode。如果有人需要，我也可以放置我的 dojoConfig，但我是从教程中获得的，所以那里没有隐藏什么大知识。