javascript - Charts js php 实现按多货币时间戳分组

Question

我有两个名为收入和支出的表，每个表也都有一个货币类型。

我正在查询每种货币每月产生的收入和支出。

查询正常，它返回:

 [
{"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

您可能应该为每种货币拥有一个数据集。所有数据集共享相同的标签数组，但每个数据集都有自己的数据点。因此基本策略是，循环遍历每种货币，将该货币的所有数据点构建到数据集中，并将其添加到 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 个条形。您可能需要考虑制作几张图表(一张用于收入，另一张用于支出)。

您可以找到具有多个数据集的条形图的良好示例 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我自己。