مصادر بيانات المخططات المختلطة في نفس الرسم البياني
-
25-09-2019 - |
سؤال
أنا جديد في Dojo وأنا نشر هنا لأول مرة. لدي مشكلة لإنشاء عدة خطوط على نفس المخطط.
لقد أجريت اختبارًا بسيطًا لمحاكاة البيانات ويعمل
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();
قمت بإنشاء ملف PHP آخر حيث أقوم بتحويل بياناتي من MySQL إلى JSON. أريد الآن أن أضع عنوان URL الخاص بمصدري إلى Dojo Addseries. سيكون هناك العديد من المصادر ، ومصادر ملفات الاختلاف.
لا أعرف أين أضع عنوان URL الخاص بي في الكود.
شكرا للمساعدة.
شكرا لردكم.
لقد جربت هذا ولكن "السلسلة 1" لا يعمل:
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();
Data_chart.php هو اختبار: <?php echo"[1, 2, 2, 3, 4, 5, 5, 7]"; ?>
أنا ضائع ، لا أعرف كيفية حل هذه المشكلة.
المحلول
أود استخدام dojox.data.datachart. يجب عليك استخدام مخزن بيانات لتمرير البيانات. نرى Quickstart-data-usingdatastores و dojo.data.
استخدم أولا أ dojo.data.itemfilereadstore. إذا كان ذلك يعمل بشكل جيد ، فاستخدم مخزن بيانات مركب ، يلف بيانات البيانات الأخرى للحصول على بياناتك من مصادر متعددة (قد تضطر إلى إنشاء تلك الفئة بنفسك)
-- تعديل --
مثال باستخدام datachart مع 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>
محتوى 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 }
]}
لاستخدام متاجر متعددة ، تحتاج إلى إنشاء compositestore تقوم بتجربة متاجر متعددة. لسوء الحظ ، لا يبدو أنه موجود ، لذلك عليك تنفيذ تلك الفئة بنفسك.
نصائح أخرى
يجب أن تحل مصانع البيانات مشكلتك. لاحظ أنه تمت إضافة بيانات البيانات في Dojo 1.5.0.
dojo.require("dojox.charting.DataSeries");
chart1.addSeries("Series 1", new dojox.charting.DataSeries(
test_store, {query: {symbol: "*"}}, "price"));
ملاحظة: أعتقد أنه يجب عليك جعل سؤالك متابعة تعليق بدلاً من إجابة.