Datenquellen gemischte Diagramme im gleichen Diagramm

Question

Ich bin neu in Dojo und poste zum ersten Mal hier. Ich habe ein Problem, mehrere Zeilen in demselben Diagramm zu erstellen.

Ich habe einen einfachen Test durchgeführt, um Daten zu simulieren und es funktioniert

  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();

Ich habe eine andere PHP -Datei erstellt, in der ich meine Daten von MySQL in JSON verwandelte. Ich möchte jetzt die URL meiner Quelle in Dojo -AddSeries setzen. Es gibt mehrere Quellen, differenzierte Dateienquellen von Daten.

Ich weiß nicht, wo ich meine URL in den Code legen soll.

Danke für die Hilfe.

---

Danke für Ihre Antwort.

Ich habe es versucht, aber die "Serie 1" funktioniert nicht:

      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();

Mein data_chart.php ist ein Test: <?php echo"[1, 2, 2, 3, 4, 5, 5, 7]"; ?>

Ich bin verloren, ich weiß nicht, wie ich dieses Problem lösen soll.

Answer 1

Ich würde das verwenden dojox.data.datachart. Sie müssen einen Datenspeicher verwenden, um die Daten zu übergeben. Sehen QuickStart-Data-UseDatastores und dojo.data.

Zuerst verwenden a dojo.data.ItemFilereadstore. Wenn dies einwandfrei funktioniert, verwenden Sie einen zusammengesetzten Datenspeicher, in dem andere Datenspeicher gewechselt werden, um Ihre Daten aus mehreren Quellen zu erhalten (Sie müssen diese Klasse möglicherweise selbst erstellen).

-- BEARBEITEN --

Ein Beispiel, das einen Dataachart mit einem itemFileadStore verwendet:

<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>

Der Inhalt von setze.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 }
]}

Um mehrere Filialen zu verwenden, müssen Sie einen Compositestore erstellen, in dem mehrere Geschäfte gruppiert werden. Leider scheint es nicht zu existieren, so dass Sie diese Klasse selbst implementieren müssen.

Answer 2

Datenerien sollten Ihr Problem lösen. Beachten Sie, dass in DOJO 1.5.0 DataSerien hinzugefügt wurden.

dojo.require("dojox.charting.DataSeries");

chart1.addSeries("Series 1", new dojox.charting.DataSeries(
    test_store, {query: {symbol: "*"}}, "price"));

PS Ich denke, Sie sollten Ihre Follow -up -Frage eher zu einem Kommentar als zu einer Antwort machen.