好的，这会有点长，我知道我晚了 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，但我是从教程中获得的，所以那里没有隐藏什么大知识。