同一图表中的混合图表数据源答案

【问题标题】：Mixed Charting DATA sources in the same CHART同一图表中的混合图表数据源
【发布时间】：2010-08-31 13:46:37
【问题描述】：

我是 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]"; ?>

我迷路了，我不知道如何解决这个问题。

【问题讨论】：

标签： php javascript charts dojo dojox.charting

【解决方案1】：

我会使用dojox.data.DataChart。您必须使用数据存储来传递数据。请参阅quickstart-data-usingdatastores 和dojo.data。

首先使用dojo.data.ItemFileReadStore。如果效果很好，请使用复合数据存储，它包装其他数据存储以从多个源获取数据（您可能必须自己创建该类）

-- 编辑--

使用带有 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 }
]}

要使用多个商店，您需要创建一个组合多个商店的复合商店。不幸的是，它似乎不存在，因此您必须自己实现该类。

【讨论】：

谢谢 davyM，我会将我所有的数组数据推送到同一个 json url 上！它就像一个魅力。 ;-)

【解决方案2】：

DataSeries 应该可以解决您的问题。请注意，DataSeries 是在 dojo 1.5.0 中添加的。

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

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

PS 我认为你应该让你的后续问题成为评论而不是答案。

【讨论】：