图表js php实现组(按multiCurrency时间戳记)

加布里埃尔·梅莱斯

我有两个名为收入和支出的表,这些表中的每个表也都有一种货币类型。

我正在查询以了解每种货币每个月产生了多少收入和支出。

该查询很好,它返回以下内容:

 [
{"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的文档,我需要设置标签以及每个标签的值。可能发生在某月某个货币没有任何变动但另一货币有任何变动的情况,因此数据将显示错误。我该如何解决?

谢谢

编辑:我试图使用条形图,对于标签im实际上使用此生成它们:

        $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"));
        }

Patricks解决方案,但我无法使它正常工作:

// 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}
});
甲虫汁

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

您可以在此处找到具有多个数据集的条形图的良好示例

附录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)

在这一点上,标签中每个项目的每个数据集都应该有一个值。最后要做的是按年份对dataSource进行排序,然后按月份进行排序,以确保在向图表中添加值时,它们与标签的排序顺序相同。我将让您弄清楚如何根据对象属性对对象数组进行排序,但这是我自己学习的地方

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章