AddSeries Parameter
-
25-09-2019 - |
Frage
Ich versuche, einige funktionale Charts schwer zu bekommen mit Dojo ...
Ich möchte ein gestapeltes Flächendiagramm mit 3 Zeilen erstellen. Für die "bas", "moy" und "haut", wie Sie in den JSON-Daten zu sehen.
var jStore = {"identifier":"mois",
"items":[{"mois":1, "bas":98, "moy":122.5, "haut":147},
{"mois":2, "bas":91, "moy":113.75, "haut":136.5},
{"mois":3, "bas":91, "moy":113.75, "haut":136.5},
{"mois":4, "bas":84, "moy":105, "haut":126},
{"mois":5, "bas":77, "moy":96.25, "haut":115.5},
{"mois":6, "bas":63, "moy":78.75, "haut":94.5},
{"mois":7, "bas":49, "moy":61.25, "haut":73.5},
{"mois":8, "bas":42, "moy":52.5, "haut":63},
{"mois":9, "bas":49, "moy":61.25, "haut":73.5},
{"mois":10, "bas":70, "moy":87.5, "haut":105},
{"mois":11, "bas":77, "moy":96.25, "haut":115.5},
{"mois":12, "bas":84, "moy":105, "haut":126}]
};
Ich möchte die x setzen int Achse die Monate, wie es in den Code zu sehen. Rufen Sie die spezifischen Daten im JSON jede Zeile zu erstellen.
dojo.addOnLoad(function() {
var chart1 = new dojox.charting.Chart2D('chart1');
chart1.addPlot('default', {
type: 'StackedAreas',
markers: true,
tension: 'S',
lines: true,
areas: true,
labelOffset: -30,
shadows: {
dx:2, dy:2, dw:2
}
});
chart1.addAxis('x', {max:12,
labels:[
{value: 0, text: ""},
{value: 1, text: "Jan"},
{value: 2, text: "Feb"},
{value: 3, text: "Mar"},
{value: 4, text: "Apr"},
{value: 5, text: "May"},
{value: 6, text: "Jun"},
{value: 7, text: "Jul"},
{value: 8, text: "Aug"},
{value: 9, text: "Sept"},
{value: 10, text: "Oct"},
{value: 11, text: "Nov"},
{value: 12, text: "Dec"}
]});
chart1.addAxis('y', { vertical: true, max:200, includeZero: true });
chart1.addSeries('Basse', (jStore, {query: {bas: "*"}}, "bas"),{ stroke: 'red', fill: 'pink' });
chart1.addSeries('Moyenne',(jStore, {query: {moy: "*"}}, "moy"), { stroke: 'green', fill: 'lightgreen' });
chart1.addSeries('Haute',(jStore, {query: {haut: "*"}}, "haut"), { stroke: 'blue', fill: 'lightblue' });
chart1.render();
var anim1a = new dojox.charting.action2d.Magnify(chart1, "default");
var anim1b = new dojox.charting.action2d.Tooltip(chart1, "default");
var legend1 = new dojox.charting.widget.Legend({
chart:chart1
},"legend1");
chart1.render();
});
Es funktioniert nicht, ich weiß nicht, wath ich statt (jStore, {query: {haut: "*"}}, "haut")
setzen müssen, um meine spezifischen Daten zu nennen.
Bitte um Hilfe! Thanx a lot.
Lösung
Von den offiziellen Dokumenten dojo.data Verwendung Datenquellen mit Charts :
dojox.charting.DataSeries wird verwendet, um dojo.data Läden zu verbinden. Der Benutzer sollte es schaffen und geben sie anstelle eines Datenfeldes in chart.addSeries () -Aufruf.
Anwendungsbeispiele finden Sie in dojox/charting/tests/test_DataSeries.html
gefunden werden.
Ein weiteres fehlendes Stück in Ihrem Beispiel ist ein Speicherobjekt. Irgendwie versuchen Sie um eine JSON-Struktur zu übergeben, welche Daten, aber keine Methoden erforderlich. Sie sollten einen Datenspeicher zuerst aus Ihren Daten erstellen. Ich habe keine Ahnung, welche Daten speichern, die Sie verwenden möchten, aber wenn alles, was Sie wollen, ist Ihre Datenstruktur zu zeigen, können Sie dojo.data.ItemFileReadStore
verwenden:
dojo.require("dojo.data.ItemFileReadStore");
var jStore = ...; // not really a store, but your JSON-like object
var realStore = new dojo.data.ItemFileReadStore({data: jStore});
...
chart1.addSeries(
'Basse',
new dojox.charting.DataSeries(realStore, {query: {bas: "*"}}, "bas"),
{stroke: 'red', fill: 'pink'}
);
Verwenden Link oben über dojox.charting.DataSeries
zu lernen. Lesen Sie alles über dojo.data
in der offiziellen Dokumentation: http://docs.dojocampus.org/dojo/data