Диаграмма додзё - Дата как ось X - Даты, изображенные на графике, неверны и не связаны с данными, полученными из серверной части
Мы работаем над приложением, связанным с биржевыми графиками, используя dojo 10.0.3. В связи с характером приложения нам нужно использовать дату в качестве оси X.
И дата (ось X), и различные цены (ось Y) взяты из серверной базы данных, полученной с помощью вызова веб-службы Restful:
var jsonStore = new JsonStore({"target": "/blah1/blah2", "idProperty": "date" });
Ниже приведен фрагмент кода для построения диаграмм:
function dateLabel (dateString) {
// While date in the backend is integer, what is passed to this function is strangely
// a string in the format of "1,415,232,000,000", irrelevant to the backend data.
var dateInt = parseInt( ( dateString.replace(/,/g, "") ) );
var dt = new Date(dateInt);
return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
}
var xOpts = {
"title" : "Date",
"titleOrientation": "away", // or "axis"
"titleGap" : 10,
"majorLabels" : true,
"majorTicks" : true,
"majorTick" : {"length": 10},
"majorTickStep" : 31536000000, /** 1 year in milliseconds **/
"minorLabels" : true,
"minorTicks" : true,
"minorTick" : {"length": 6},
"minorTickStep" : 2419200000, /** 4 weeks in milliseconds **/
"microTicks" : true,
"microTick" : {"length": 3},
"microTickStep" : 86400000, /** 1 day in milliseconds **/
"labelFunc" : dateLabel
}
var chart = new Chart("chartNode");
chart.addPlot("default", { "type": Lines, "markers": true, hAxis: "x", vAxis: "y" } );
chart.addAxis("x", xOpts);
chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
var tip = new Tooltip(chart,"default");
var mag = new Magnify(chart,"default");
var storeSeries = new StoreSeries(jsonStore, { query: { } }, {"x": "date", "y": "close"} );
chart.addSeries("Close", storeSeries, strokeAndFill1 );
chart.render();
Хотя график верен в отношении оси Y, даты, нанесенные на ось X, довольно странные и не совпадают с маркерами.
Из Firebug объекты json, возвращаемые из серверной части:
[{"date":1414990800000,"open":164.25,"high":164.54,"low":163.38,"close":164.36,...},
{"date":1415077200000,"open":164.34,"high":164.36,"low":162.24,"close":162.65,...},
{"date":1415163600000,"open":163.13,"high":163.54,"low":161.56,"close":161.82,...},
{"date":1415250000000,"open":161.28,"high":161.53,"low":160.05,"close":161.46,...},
{"date":1415336400000,"open":161.42,"high":162.21,"low":160.85,"close":162.07,...}]
(The above "date" data correspond to Nov 3 ~ Nov 7, 2014, all at 0:00 AM GMT-5.)
Однако дата, переданная в функцию вычисления оси X, dateLabel, представляет собой строку: "1 415 232 000 000" (т. Е. 5 ноября 2014 г. в 19:00 по Гринвичу-5), которая не имеет отношения к данным бэкэнда.
Вопросы:
1) Why X-Axis behaves so strange? Why the data passed to the dateLabel function is not the date
returned from the web service call as defined in the StoreSeries?
2) Currently in the plot, when the "marker" is clicked, it only shows the price. Is it possible
to customize it to show both the date and the price?
Большое спасибо за помощь!
телефон
1 ответ
Чтобы ответить на мой собственный вопрос:
Проследили в исходный код dojox и нашли ответ. Исходный код, связанный с расчетом Оси-тиков, выглядит следующим образом:
var lowerBound = findString(kwArgs.fixLower, ["major"]) ?
Math.floor(kwArgs.min / majorTick) * majorTick :
findString(kwArgs.fixLower, ["minor"]) ?
Math.floor(kwArgs.min / minorTick) * minorTick :
findString(kwArgs.fixLower, ["micro"]) ?
Math.floor(kwArgs.min / microTick) * microTick : kwArgs.min,
upperBound = findString(kwArgs.fixUpper, ["major"]) ?
Math.ceil(kwArgs.max / majorTick) * majorTick :
findString(kwArgs.fixUpper, ["minor"]) ?
Math.ceil(kwArgs.max / minorTick) * minorTick :
findString(kwArgs.fixUpper, ["micro"]) ?
Math.ceil(kwArgs.max / microTick) * microTick : kwArgs.max;
if(kwArgs.useMin){ min = lowerBound; }
if(kwArgs.useMax){ max = upperBound; }
var majorStart = (!majorTick || kwArgs.useMin && findString(kwArgs.fixLower, ["major"])) ?
min : Math.ceil(min / majorTick) * majorTick,
minorStart = (!minorTick || kwArgs.useMin && findString(kwArgs.fixLower, ["major", "minor"])) ?
min : Math.ceil(min / minorTick) * minorTick,
microStart = (! microTick || kwArgs.useMin && findString(kwArgs.fixLower, ["major", "minor", "micro"])) ?
min : Math.ceil(min / microTick) * microTick,
majorCount = !majorTick ? 0 : (kwArgs.useMax && findString(kwArgs.fixUpper, ["major"]) ?
Math.round((max - majorStart) / majorTick) :
Math.floor((max - majorStart) / majorTick)) + 1,
minorCount = !minorTick ? 0 : (kwArgs.useMax && findString(kwArgs.fixUpper, ["major", "minor"]) ?
Math.round((max - minorStart) / minorTick) :
Math.floor((max - minorStart) / minorTick)) + 1,
microCount = !microTick ? 0 : (kwArgs.useMax && findString(kwArgs.fixUpper, ["major", "minor", "micro"]) ?
Math.round((max - microStart) / microTick) :
Math.floor((max - microStart) / microTick)) + 1,
minorPerMajor = minorTick ? Math.round(majorTick / minorTick) : 0,
microPerMinor = microTick ? Math.round(minorTick / microTick) : 0,
majorPrecision = majorTick ? Math.floor(Math.log(majorTick) / Math.LN10) : 0,
minorPrecision = minorTick ? Math.floor(Math.log(minorTick) / Math.LN10) : 0,
где начальный kwArgs.min (например, 1415250000000) и начальный kwArgs.max (например, 1415336400000) являются минимальным и максимальным моментом времени (в миллисекундах с начала эпохи) из внутреннего источника данных;
и majorTick, minorTick и microTick являются соответствующими шагами тика. (В моем случае устранения неполадок я установил majorTick равным 86400000, который за один день выражается в миллисекундах, и отключил второстепенные и микро тики для простоты.)
Исходя из приведенного выше исходного кода, кажется, что независимо от того, что я настраиваю X-Axis, диаграммы dojox не будут подходить для моего простого и распространенного бизнес-случая, когда дату нужно использовать как X-Axis. Тики, нанесенные на ось X, плохо совпадают с маркерами на графике. Я должен либо предоставить свой собственный код, либо использовать какую-то другую схему построения диаграмм, такую как D3.
Спасибо!