Fontes de dados de gráficos mistas no mesmo gráfico
https://stackoverflow.com/questions/3609594
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Sou novo em Dojo e posto aqui pela primeira vez. Tenho um problema para criar várias linhas no mesmo gráfico.
Eu fiz um teste simples para simular dados e funciona
dojo.require("dojox.charting.Chart2D");
makeCharts = function(){
//crée un nouvel objet graphique
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("line", {type: "Lines"});
chart1.addPlot("space", {type: "Areas", hAxis: "space x", vAxis: "space y"});
chart1.addPlot("histo", {type: "Bars", gap: 6, hAxis: "histo x", vAxis: "histo y"});
chart1.addAxis("histo x", {
labels: [{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: "Sep"}, {value: 10, text: "Oct"},
{value: 11, text: "Nov"}, {value: 12, text: "Dec"}]
});
chart1.addAxis("histo y", {vertical: true,
max: 10,
stroke: "green",
fontColor: "black",
majorTick: {color: "red", length: 6},
minorTick: {stroke: "black", length: 3}});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7],
{plot:"line", stroke: {color:"red"}});
chart1.addSeries("Series 2", [1, 2, 4, 2, 1, 6, 4, 5],
{plot: "space", stroke: {color:"blue"}, fill: "lightblue"});
chart1.addSeries("Series 3", [1, 2, 2, 3, 4, 5, 5, 7],
{plot: "histo", stroke: {color:"green"}, fill: "lightgreen"});
chart1.render();
Criei outro arquivo PHP, onde transformo meus dados do MySQL em JSON. Eu quero agora colocar o URL da minha fonte para o Dojo Addseries. Haverá várias fontes, diferentes arquivos fontes de dados.
Não sei onde colocar meu URL no código.
Obrigado pela ajuda.
Obrigado pela sua resposta.
Eu tentei isso, mas o "Série 1" não funciona:
dojo.require("dojox.charting.Chart2D");
dojo.require("dojo.data.ItemFileWriteStore");
makeCharts = function(){
test_store = new dojo.data.ItemFileWriteStore({url: 'data_chart.php'});
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("line", {type: "Lines"});
chart1.addPlot("space", {type: "Areas", hAxis: "space x", vAxis: "space y"});
chart1.addPlot("histo", {type: "Bars", gap: 6, hAxis: "histo x", vAxis: "histo"});
chart1.addAxis("histo x", {
labels: [{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: "Sep"}, {value: 10, text: "Oct"},
{value: 11, text: "Nov"}, {value: 12, text: "Dec"}]});
chart1.addAxis("histo y", {vertical: true, max: 10, stroke: "green", fontColor:"black", majorTick: {color: "red", length: 6}, minorTick: {stroke: "black", length: 3}});
chart1.addSeries("Series 1", {data :test_store,plot:"line", stroke: {color:"red"}});
{color:"black"}});
chart1.addSeries("Series 2", [1, 2, 4, 2, 1, 6, 4, 5],
{plot: "space", stroke: {color:"blue"}, fill: "lightblue"});
chart1.addSeries("Series 3", [1, 2, 2, 3, 4, 5, 5, 7],
{plot: "histo", stroke: {color:"green"}, fill: "lightgreen"});
chart1.render();
Meu data_Chart.php é um teste: <?php echo"[1, 2, 2, 3, 4, 5, 5, 7]"; ?>
Estou perdido, não sei como resolver esse problema.
Solução
Eu usaria o dojox.data.datachart. Você precisa usar um armazenamento de dados para passar nos dados. Ver Quickstart-Data-UsingDataTores e dojo.data.
Primeiro use a dojo.data.itemfileReadStore. Se isso funcionar bem, use um armazenamento de dados composto, que envolva outros dados de dados para obter seus dados de várias fontes (você pode precisar criar essa classe sozinha)
-Editar-
Um exemplo usando um datachart com um itemFileReadStore:
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js.uncompressed.js"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dojox.charting.DataChart");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.addOnLoad(function() {
var store = new dojo.data.ItemFileWriteStore({
url: "stock.json"
});
chart = new dojox.charting.DataChart("chartDiv" ,{});
chart.setStore(store, {symbol:"*"}, "historicPrice"); // <-- single value property
});
//]]>
</script>
</head>
<body>
<div id="chartDiv" style="width: 600px; height: 400px;"></div>
</body>
</html>
O conteúdo de Stock.json:
{ "identifier": "symbol", "idAttribute":"symbol", "label": "symbol","items": [
{ "symbol":"ANDT", "name":"Anduct", "historicPrice":[0.01,3.52,3.66,3.11,3.90,3.11,3.11], "open":3.13, "price":3.52, "updown":"^", "change":"+0.39 (+21%)", "low":3.13, "high":3.69 },
{ "symbol":"ATEU", "name":"Ations Europe", "historicPrice":[6.72,6.76,6.61,6.41,6.31,6.99,7.20], "open":6.72, "price":6.76, "updown":"^", "change":"+0.04 (+01%)", "low":6.56, "high":6.77 },
{ "symbol":"BGCN", "name":"Bagies Consulting", "historicPrice":[4.11,3.98,4.05,4.20,4.16,4.22,3.80], "open":4.11, "price":3.98, "updown":"v", "change":"-0.13 (-05%)", "low":3.77, "high":4.11 },
{ "symbol":"BAYC", "name":"BAY Corporation", "historicPrice":[9.79,9.60,9.50,2.23,9.45,9.76,9.99], "open":9.79, "price":9.60, "updown":"v", "change":"-0.19 (+14%)", "low":9.60, "high":9.81 },
{ "symbol":"CRCR", "name":"Corcor PLC", "historicPrice":[8.44,8.44,8.54,8.60,9.65,8.42,8.44], "open":8.44, "price":8.44, "updown":"--", "change":"+0.00 (+00%)", "low":8.22, "high":8.44 },
{ "symbol":"DTOA", "name":"Datio PLC", "historicPrice":[2.11,2.47,3.11,3.06,3.01,3.01,3.00], "open":2.11, "price":2.47, "updown":"^", "change":"+0.36 (+36%)", "low":2.11, "high":3.01 }
]}
Para usar várias lojas, você precisa criar um compositário que agrupa várias lojas. Infelizmente, parece não existir, então você precisa implementar essa classe.
Outras dicas
DataSeries deve resolver seu problema. Observe que o DataSeries foi adicionado no Dojo 1.5.0.
dojo.require("dojox.charting.DataSeries");
chart1.addSeries("Series 1", new dojox.charting.DataSeries(
test_store, {query: {symbol: "*"}}, "price"));
PS Eu acho que você deve fazer sua pergunta de acompanhamento um comentário em vez de uma resposta.
