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

我正在建立一个需要动态更新线图的网站，为此我使用了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值递增1。我需要使用自定义值（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）值对来动态更新这个数据存储呢？有没有其他方法可以做到这一点？
致上

好吧，这将是一个有点长，我知道我晚了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&#x27;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在button元素中解释，还有一个chartNode来实现图表。如果有人需要，我也可以把我的dojoConfig放在那里，但我是从教程中得到的，所以没有什么大的知识隐藏在那里。

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

2条答案

相关问题

热门标签

最新问答