charts multiCurrencyタイムスタンプによるjs php実装グループ

Question

私は、incomeとexpensesという2つのテーブルを持っています。これらのテーブルのそれぞれも通貨タイプを持っています。

私は、毎月の通貨でどのくらいの収入と経費が発生しているかを調べるためにクエリを実行しています。

クエリは結構です、それは、これを返します。

[ 
{"type":"income","monto":"1000","currency":"1","month":"6","year":"2016","idcurrency":"1","name":"Pesos argentinos","simbolo":"$"}, 
{"type":"expenditure","monto":"-500","currency":"1","month":"6","year":"2016","idcurrency":"1","name":"Pesos argentinos","simbolo":"$"}, 
{"type":"income","monto":"5000","currency":"2","month":"6","year":"2016","idcurrency":"2","name":"Dolares estadounidenses","simbolo":"u$d"}, 
{"type":"expenditure","monto":"-5000","currency":"2","month":"6","year":"2016","idcurrency":"2","name":"Dolares estadounidenses","simbolo":"u$d"}, 
{"type":"expenditure","monto":"-5000","currency":"3","month":"6","year":"2016","idcurrency":"3","name":"Pesos uruguayos","simbolo":"$"} 
] 

私はチャートのJSを使用して、それをプロットする必要がありますが、問題はチャートJSのマニュアルに従って、私はラベルと設定する必要があることですこれらのラベルのそれぞれの値。 何ヶ月も通貨で何の動きもありませんでしたが、別の通貨ではデータが間違って表示されることがあります。 どうすればこの問題を解決できますか？

おかげ

編集： イムラベルは、実際にそれらを生成するためにこれを使用してイムのために、バーグラフを使用しようとしている：

 $desde = new DateTime(); 
     $desde->modify('first day of this month'); 
     $desde = $desde->sub(new DateInterval('P1Y')); 

     $hasta = new DateTime(); 
     $hasta->modify('first day of next month'); 

     $interval = DateInterval::createFromDateString('1 month'); 
     $period = new DatePeriod($desde, $interval, $hasta); 


     $info = array(); 


     foreach ($period as $dt) { 
      array_push($info,$dt->format("Y-m")); 
     } 

パトリック・ソリューションが、私はそれを動作させることはできません。

// Bar chart 
var ctx = document.getElementById("graficoIngresosCostos"); 

let dataSource = 
<?=$dataSource?>; 

//build the labels (you already did it in your OP. This is your info array 
// that holds the first day of each month) 
let labels = <?=$labels?>; 

let currencies = <?=$monedas?>; 
let datasets = []; 

currencies.forEach(c => { 
//filter out the incomes and expenditures for just the currency 
// you're interested in 
let incomeSource = dataSource.filter(
source=>source.nombre===c && source.concepto==='ingresos'); 
let expenseSource = dataSource.filter(
source=>source.nombre===c && source.concepto==='gastos'); 

let incomeDataset = { //dataset that holds this currency's income 
label:c + ': ingresos', 
data:[], 
backgroundColor:'#03586A' //set color of bars 
}; 
let expenseDataset = {//dataset that holds this currency's expense 
label:c + ': gastos', 
data:[], 
backgroundColor:'#03586A' //set color of bars 
}; 
//add datapoints to income and expense datasets for this currency 
incomeSource.forEach(source=>{incomeDataset.data.push(source.monto)}); 
expenseSource.forEach(source=>{expenseDataset.data.push(source.monto)}); 

//todo: set backgroundColor for the bars of this dataset 

//add the datasets to the chart 
datasets.push(incomeDataset,expenseDataset); 
}); 

//at this point you have all the datasets organized. Build chart 
//ctx refers to the 2dContext of the canvas 
let chart = new Chart(ctx,{ 
type:'bar', 
data:{labels:labels, datasets:datasets} 
}); 

Answer 1

おそらく通貨ごとに1つのデータセットが必要です。すべてのデータセットは同じラベル配列を共有しますが、各データセットには独自のデータポイントがあります。基本的な戦略は、各通貨をループして、その通貨のすべてのデータポイントをデータセットに構築し、datasets配列に追加することです。

let dataSource = [ 
    {"type":"income","monto":"1000","currency":"1","month":"6","year":"2016","idcurrency":"1","name":"Pesos argentinos","simbolo":"$"}, 
    {"type":"expenditure","monto":"-500","currency":"1","month":"6","year":"2016","idcurrency":"1","name":"Pesos argentinos","simbolo":"$"}, 
    {"type":"income","monto":"5000","currency":"2","month":"6","year":"2016","idcurrency":"2","name":"Dolares estadounidenses","simbolo":"u$d"}, 
    {"type":"expenditure","monto":"-5000","currency":"2","month":"6","year":"2016","idcurrency":"2","name":"Dolares estadounidenses","simbolo":"u$d"}, 
    {"type":"expenditure","monto":"-5000","currency":"3","month":"6","year":"2016","idcurrency":"3","name":"Pesos uruguayos","simbolo":"$"} 
]; 

//build the labels (you already did it in your OP. This is your info array 
// that holds the first day of each month) 
let labels = [/*info*/]; 

//if you want to build this dynamically, loop through dataSource and 
//push the currency (be sure to check for duplicates) to the array 
let currencies = ['Dolares estadounidenses','Pesos uruguayos','Pesos argentinos']; 
let datasets = []; 
currencies.forEach(c => { 
    //filter out the incomes and expenditures for just the currency 
    // you're interested in 
    let incomeSource = dataSource.filter(
     source=>source.name===c && source.type==='income'); 
    let expenseSource = dataSource.filter(
     source=>source.name===c && source.type==='expenditure'); 

    let incomeDataset = { //dataset that holds this currency's income 
     label:c + ': income', 
     data:[], 
     backgroundColor:'' //set color of bars 
    }; 
    let expenseDataset = {//dataset that holds this currency's expense 
     label:c + ': expenditures', 
     data:[], 
     backgroundColor:'' //set color of bars 
    }; 
    //add datapoints to income and expense datasets for this currency 
    incomeSource.forEach(source=>{incomeDataset.data.push(source.monto)}); 
    expenseSource.forEach(source=>{expenseDataset.data.push(source.monto)}); 

    //todo: set backgroundColor for the bars of this dataset 

    //add the datasets to the chart 
    datasets.push(incomeDataset,expenseDataset); 
}); 

//at this point you have all the datasets organized. Build chart 
//ctx refers to the 2dContext of the canvas 
let chart = new Chart(ctx,{ 
    type:'bar', 
    data:{labels:labels, datasets:datasets} 
}); 

あなただけの4通貨を持っている場合、あなたは8つのデータセットを持っていますので、あなたのチャートは、正直に言うと、非常に混雑になります。これは、x軸の値ごとに最大8つのバーが可能であることを意味します。あなたは2つのチャート（収入のためのものと支出のためのもの）を持つことを検討したいかもしれません。

棒グラフのサンプルは、複数のデータセットhereで見つけることができます。

補遺1

あなたのデータセットの一部が穴（データなしヶ月）を持っている場合は、行うにはより多くの仕事を持っています。 Chart.jsには数字の配列だけが表示されるため、穴がどこにあるかを知る方法がありません。したがって、データセットを構築する前に、すべての通貨の収入と支出の両方がラベルを持つデータ値と同じ数になるように、dataSourceを貼り付ける必要があります。ロジックはのようになります。この時点で

foreach(labels) 
    //extract month and year that this label is responsible for 
    month=...; year=...; 

    foreach(currencies as c) 

     //capture the data for the current month and currency 
     currencyData = dataSource.filter(
      source => source.name===c && source.month===month 
             && source.year===year); 

     //separate into income/expense data for this month  
     incomeDatapoints = currencyData.filter(
      source=>source.type==='income'); 
     exprenseDatapoints = dataSource.filter(
      source=>source.type==='expenditure'); 

     //if income data is missing, add a null datapoint the Chart.js 
     //will keep data and labels in alignment 
     if(!incomeDatapoints.length) 
      dataSource.push({ 
       type:'income', 
       monto: 0, //or maybe null 
       currency:c, 
       month:month, 
       year:year 
      }); 
     end if 

     //repeat the if block above with expanseDatapoints 

    endforeach(currencies) 
end foreach(labels) 

は、すべてのデータセットを行うには、ラベル内のすべての項目 最後の値を持つべきであることは を保証するために、月ごと、その後、年によってデータソースをソートするときに、あなたのことラベルに と同じ順序で値が追加されます。オブジェクトのプロパティに基づいてオブジェクトの配列をどのように並べるかを自分で考えてみましょう。this is where I learned it自分。