dojox.charting.Chart数据范围未正确限制图表x轴
我正在构建一个监控应用服务器上运行的服务数量的应用程序。有关正在运行的服务的信息将存储在数据库中，我想在网页上显示其中的一些信息。此时，我只想构建一个活动运行的服务数量的图形表示，它会随着数据库的更新而动态更新。目标是创建一个简单的图表，显示最近运行的服务数量的10个（大约）值，类似于心电图读数。我正在使用dojox.charting.Chart小部件，但无法正确更新图表，因此它只能显示numFailedAttempts的十个最新值：“0”。正如现在一样，图表显示了所有的值，x轴的值不断地变得越来越近，以适应一切。基于dojoapi参考和dojotoolkit.org上的文档，我认为dojox.charting.Chart的“displayRange”属性应该可以解决这个问题。所以我的问题是，我做错了什么？代码如下：dojox.charting.Chart数据范围未正确限制图表x轴,dojo,dojox.charting,Dojo,Dojox.charting,我正在构建一个监控应用服务器上运行的服务数量的应用程序。有关正在运行的服务的信息将存储在数据库中，我想在网页上显示其中的一些信息。此时，我只想构建一个活动运行的服务数量的图形表示，它会随着数据库的更新而动态更新。目标是创建一个简单的图表，显示最近运行的服务数量的10个（大约）值，类似于心电图读数。我正在使用dojox.charting.Chart小部件，但无法正确更新图表，因此它只能显示numFailedAttempts的十个最新值：“0”。正如现在一样，图表显示了所有的值，x轴的值不断地变得越
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.StoreSeries");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojo.store.Memory");
dojo.require("dojo.store.Observable");
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.plot2d.Areas");
dojo.ready(function(){renderDataChart()});
function renderDataChart(){
//data from a database
var dataChartData = {
itentifier: 'id',
items:
[
{id: 1, serviceName:"service1", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"null", errorMessage:"null", suppressError:"null"},
{id: 2, serviceName:"service2", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"},
{id: 3, serviceName:"service3", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"now", errorMessage:"broken", suppressError:"click"},
{id: 4, serviceName:"service4", startDate:"today", endDate:"today", numFailedAttempts:"1", errorTime:"now", errorMessage:"broken", suppressError:"click"},
{id: 5, serviceName:"service5", startDate:"today", endDate:"today", numFailedAttempts:"0", errorTime:"null", errorMessage:"null", suppressError:"null"}
]
};
//data store
var dataChartStore = dojo.store.Observable(new dojo.store.Memory({
data: {
identifier: "id",
label: "runningServices",
items: dataChartData
}
}));
var dataChart = new dojox.charting.Chart("myDataChart", {
displayRange: 10,
stretchToFit: false,
scrolling: true,
fieldName: "runningServices",
type: dojox.charting.plot2d.Areas
});
dataChart.addAxis("x", {microTickStep: 1, minorTickStep: 1});
dataChart.addAxis("y", {vertical: true, minorTickStep: 1, natural: true});
dataChart.addSeries("y", new dojox.charting.StoreSeries(dataChartStore, {query: {numFailedAttempts: 0}}, "value"));
dataChart.render();
//update datastore to simulate new data
var startNumber = dataChartData.length;
var interval = setInterval(function(){
dataChartStore.notify({value: Math.ceil(Math.random()*29), id: ++startNumber, numFailedAttempts: 0});
}, 1000);
}
</script>
</head>
<body>
<div id="myDataChart" style="width: 500px; height: 200px;"></div>
</body>
require（“dojox.charting.StoreSeries”）；
require（“dojox.charting.Chart2D”）；
require（“dojo.store.Memory”）；
require（“dojo.store.Observable”）；
require（“dojox.charting.Chart”）；
dojo.require（“dojox.charting.plot2d.area”）；
ready（函数（）{renderDataChart（）}）；
函数renderDataChart（）{
//数据库中的数据
var数据图表数据={
itentifier:'id'，
项目：
[
{id:1，serviceName:“service1”，startDate:“today”，endDate:“today”，numFailedAttempts:“1”，errorTime:“null”，errorMessage:“null”，suppressError:“null”}，
{id:2，serviceName:“service2”，startDate:“today”，endDate:“today”，numFailedAttempts:“1”，errorTime:“now”，errorMessage:“Breaked”，suppressError:“click”}，
{id:3，serviceName:“service3”，startDate:“today”，endDate:“today”，numFailedAttempts:“0”，errorTime:“now”，errorMessage:“Breaked”，suppressError:“click”}，
{id:4，serviceName:“service4”，startDate:“today”，endDate:“today”，numFailedAttempts:“1”，errorTime:“now”，errorMessage:“Breaked”，suppressError:“click”}，
{id:5，serviceName:“service5”，startDate:“today”，endDate:“today”，numFailedAttempts:“0”，errorTime:“null”，errorMessage:“null”，suppressError:“null”}
]
};
//数据存储
var dataChartStore=dojo.store.Observable（新的dojo.store.Memory({
数据：{
标识符：“id”，
标签：“runningServices”，
项目：数据图表数据
}
}));
var dataChart=new dojox.charting.Chart（“myDataChart”{
显示范围：10，
stretchToFit:false，
滚动：对，
字段名：“runningServices”，
类型：dojox.charting.plot2d.Areas
});
addAxis（“x”{microTickStep:1，minorTickStep:1}）；
addAxis（“y”，{vertical:true，minorTickStep:1，natural:true}）；
dataChart.addSeries（“y”，新的dojox.charting.StoreSeries（dataChartStore，{query:{numFailedAttempts:0}，“value”））；
dataChart.render（）；
//更新数据存储以模拟新数据
var startNumber=dataChartData.length；
var interval=setInterval（函数（）{
notify（{value:Math.ceil（Math.random（）*29），id:++startNumber，numFailedAttempts:0}）；
}, 1000);
}
我一直在为同样的问题挣扎。我还没有完全弄明白，但我已经找到了一个替代方案，我认为你正在描述的。以下是代码（解释如下）：
require（“dojox.charting.StoreSeries”）；
require（“dojo.store.Memory”）；
require（“dojo.store.Observable”）；
require（“dojox.charting.Chart2D”）；
require（“dojox.charting.Chart”）；
dojo.require（“dojox.charting.plot2d.area”）；
dojo.ready（函数（）{
RenderrayChart（）；
renderStoreChart（）；
});
函数renderraychart（）{
试一试{
var dataChart=new dojox.charting.Chart（“myArrayChart”{
stretchToFit:false，
滚动：false，
类型：dojox.charting.plot2d.Areas，
标题：“更新数组，重新加载”
});
//创建一个x/y对数组作为数据源
var数据=[{x:1，y:2.1}]；
addAxis（“x”{microTickStep:1，minorTickStep:1}）；
//设置最小/最大值，使Y轴比例不随数据变化
addAxis（“y”，{vertical:true，minorTickStep:1，natural:true，min:0，max:30}）；
//以数据数组作为源创建序列
dataChart.addSeries（“y”，数据）；
dataChart.render（）；
//此计数器用作新数据点的x值
var startNumber=data.length；
//更新数据存储以模拟新数据
var interval=setInterval（函数（）{
//如果阵列中有9个以上的数据点，请删除第一个数据点
如果（数据长度>9）数据拼接（0,1）；
//使用计数器作为X值将新数据点推送到阵列上
push（{x:++startNumber，y:Math.ceil（Math.random（）*29）}）；
//使用更新的arrray更新系列
dataChart.updateSeries（“y”，数据）；
//重新渲染图表
dataChart.render（）；
}, 1000);
}
捕获（ex）{
警报（例如消息）；
}
}
函数renderStoreChart（）{
试一试{
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.charting.StoreSeries");
dojo.require("dojo.store.Memory");
dojo.require("dojo.store.Observable");
dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.plot2d.Areas");
dojo.ready(function () {
renderArrayChart();
renderStoreChart();
});
function renderArrayChart() {
try {
var dataChart = new dojox.charting.Chart("myArrayChart", {
stretchToFit: false,
scrolling: false,
type: dojox.charting.plot2d.Areas,
title: "update array, rerender"
});
// create an array of x/y pairs as the data source
var data = [{ x: 1, y: 2.1}];
dataChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 });
// set min/max so the Y axis scale does not change with the data
dataChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 });
// create the series with the data array as the source
dataChart.addSeries("y", data);
dataChart.render();
// this counter is used as the x value for new data points
var startNumber = data.length;
//update datastore to simulate new data
var interval = setInterval(function () {
// if we have more than 9 data points in the array, remove the first one
if (data.length > 9) data.splice(0, 1);
// push a new data point onto the array using the counter as the X value
data.push({ x: ++startNumber, y: Math.ceil(Math.random() * 29) });
// update the series with the updated arrray
dataChart.updateSeries("y", data);
// re-render the chart
dataChart.render();
}, 1000);
}
catch (ex) {
alert(ex.message);
}
}
function renderStoreChart() {
try {
// create an array as the data source
var dataArray = [{ id: 1, value: 2.1}];
// create the observable data store
var dataStore = dojo.store.Observable(new dojo.store.Memory({
data: {
identifier: "id",
items: dataArray
}
}));
var storeChart = new dojox.charting.Chart("myStoreChart", {
stretchToFit: false,
scrolling: false,
type: dojox.charting.plot2d.Areas,
title: "data store"
});
storeChart.addAxis("x", { microTickStep: 1, minorTickStep: 1 });
// set min/max so the Y axis scale does not change with the data
storeChart.addAxis("y", { vertical: true, minorTickStep: 1, natural: true, min: 0, max: 30 });
storeChart.addSeries("y", new dojox.charting.StoreSeries(dataStore, { bindings: { x: "id", y: "value"} }));
storeChart.render();
// this counter is used as the x value for new data points
var startNumber = 1;
//update datastore to simulate new data
var interval = setInterval(function () {
// if we have more than the desired number data points in the store, remove the first one
if (startNumber > 9) dataStore.notify(null, startNumber - 10);
// add a new point to the data store
dataStore.notify({ id: ++startNumber, value: Math.ceil(Math.random() * 29) });
}, 1000);
}
catch (ex) {
alert(ex.message);
}
}
</script>
</head>
<body>
<div id="myArrayChart" style="width: 500px; height: 200px;"></div><br />
<div id="myStoreChart" style="width: 500px; height: 200px;"></div>
</body>
</html>