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

Posted 2023-02-16

【中文标题】使用指定的 x 和 y 值更新动态 Dojo 图表

【英文标题】：Updating a dynamic Dojo chart with specified x and y values

【发布时间】：2011-07-04 10:12:53

【问题描述】：

我正在构建一个需要动态更新折线图的网站。 为此，我正在使用 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) 值对动态更新此数据存储？ 有没有其他方法可以做到这一点？

最好的问候

【参考方案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)
                          );

希望对你有帮助！

【参考方案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，但我是从教程中获得的，所以那里没有隐藏什么大知识。