2

私は新人段階でjavascriptを学んでいます。特定の日付に登録されたユーザー数を取得し、このデータを JSON オブジェクトとして返す API を作成しました。これがそのデータのサンプルです

{"myjsonobject": [{"users": 3, "joined": "2013-05-25"}, {"users": 1, "joined": "2013-05-26"}, {"users": 1, "joined": "2013-05-30"}, {"users": 1, "joined": "2013-05-31"}]}

次に、以下の JavaScript 関数を使用して、ChartJS折れ線グラフのデータとグラフを解析します。

$(document).ready(function()
{
url = "http://mylink/getjson/"
Create_jsonObject(url)
});

function Create_jsonObject(url) {
$.getJSON(url, function (data) {

myJSONObject=data;
var dataSource=myJSONObject.myjsonoject;
var chart = $("#chartContainer").dxChart({

    dataSource: dataSource,

    commonSeriesSettings: {

         argumentField: 'joined'

    },

    series: [

        { valueField: 'users', name: 'users' },

    ],

    argumentAxis:{

        grid:{

            visible: true

        }

    },

    tooltip:{

        enabled: true

     },

     title: 'Volunteer Registration',

     legend: {

        verticalAlignment: 'bottom',

        horizontalAlignment: 'center'

     },

    commonPaneSettings: {

        border:{

            visible: true,

            right: false

        }       

    }

 });


});
};

この関数は、折れ線グラフで JSON データをグラフ化する際に機能します。欠落している日付をチェックし、日付が欠落しているユーザーを 0 人挿入する JavaScript 関数を組み込みたいと考えています。したがって、日付が返されなかった場合、グラフはゼロをプロットします。返された最も早い日付に対してこれをチェックする必要があります。アイデアはありますか？

ありがとう

4

4 に答える 4

3

範囲を記述する配列で欠落している要素を埋める方法

開始配列が既にソートされていると仮定すると、ソース配列の最初の要素を新しい配列にコピーしてから、「デフォルト オブジェクト」を宛先配列に繰り返しプッシュするか、一致するオブジェクトがある場合はソース配列からコピーすることができます。範囲の終わりに達するまで繰り返します。

一致するオブジェクトがあるかどうかを確認するには、最初に、反復処理するパラメーター (この場合は「結合された」フィールド) でソース配列にインデックスを付けることができます。これは、このパラメーターが一意でなければならないことを意味します。

function getIndex(srcArray, field) {
    var i, l, index;
    index = [];
    for(i = 0, l = srcArray.length; i < l; i++) {
        index[srcArray[i][field]] = srcArray[i];
    }
    return index;
}

これにより、配列のハッシュマップが作成されます。キー（あなたの場合は「結合された」フィールド）で要素を検索するのは非常に簡単です：

if(index['2013-06-05'] !== undefined) { 
    /* the element indexed by "2013-06-05" exists */ 
}

インデックスが作成されたので、予想される範囲を反復処理できます。このために、ソース配列の最初と最後の日付を取得します。

//get boundaries
var first = new Date(src[0].joined);
var last = new Date(src[src.length-1].joined);

また、デフォルト オブジェクトの作成方法も知っておく必要があります。

function createDefault(datestr) {
    return {users: 0, joined: datestr};
}

次に、宛先配列を宣言し、範囲を反復処理します。

var dest = [];
for(var d = first; d.getTime() <= last.getTime(); d.setDate(d.getDate()+1)) {
    datestr = dateToYMD(d); //dateToYMD is a helper function I declared that formats a date
    if(index[datestr]) {
        //this date exists in your data, copy it
        dest.push(index[datestr]);
    } else {
        //this date does not exist, create a default
        dest.push(createDefault(datestr));
    }
}

宛先配列をコンソールに記録する jsfiddle を作成しました。 http://jsfiddle.net/uNasR/

于 2013-06-06T08:27:33.893 に答える
0

少し混乱があるように感じます。

あなたが提供したコードに基づいて、あなたはこの ChartJS を使用していると思います: http://chartjs.devexpress.com

:)

それで、私はあなたの目標を達成するためのもう1つの方法を試してみます:あなたの引数のタイプを明示的に指定してください:

argumentAxis: {
    grid: {
        visible: true
    },
    //add this line to specify
    argumentType: "datetime"
},

ChartJSドキュメントの詳細

于 2013-06-08T08:10:22.770 に答える
0 
function fix(json){ 
  var updateUserToDate = function(object){ 
    if (!object['joined']){ object.joined = 0 }
  }
  json.myjsonobject.forEach(updateUserToDate);
  return json;
}

これは私のバージョンです

Ewald Stieger が指摘しているように、データがまだ文字列形式の場合は、この関数に送信する前に JSON.parse を呼び出す必要があります。

于 2013-06-06T07:47:37.527 に答える