如何将最近几个月计算为一个时期，并通过javascript更新到图表

Question

我需要根据时间段更新图表。

目前图表正在更新从1月到12月的3,6,9,12个月的所有值

现在我需要通过以下方式更新图表

• 过去 3 个月 - （表示当前月份是 12 月，所以我需要获取 12 月、11 月、10 月的图表）
• 最近6个月（12月，11月，10月，9月，8月，7月）
• 最近9个月（12月，11月，10
月，9月，8月，7月，6月，5月，4月）1 月到
• 本月（获取 1 月到本月的图表）

我已经在计算当前月份，但我不知道如何附加到图表。

我调用相同的图表函数的另一件事，三次，有没有办法让它减少代码。 我试过了，但我无法弄清楚。

任何帮助都值得赞赏

吉斯菲德尔

http://jsfiddle.net/jygh8obh/22/

目录

<select id="chartType">
<option value="bar">bar chart</option>
<option value="area">area chart</option>
<option value="line">line chart</option>
<option value="spline">spline chart</option>
</select>
<select id="SelectPeriod" >
<option value="3">January to this month</option>
<option value="3">Last 3 months</option>
<option value="6">Last 6 months</option>
<option value="9">Last 9 months</option>
<option value="12">Last 12 months</option>
</select>
<div id="chart"></div>

爪哇语

var data = [
['data4', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320]
];

//calculating current month
var currentMonth = new Date().getMonth();
console.log(currentMonth);
//c3 customisation
var chart = c3.generate({
bindto : '#chart',
data : {
    rows : data,
    type : 'bar',
},
axis : {
    x : {
        tick : {
            format : function (d) {
                return formatMonth(d);
            }
        }
    }
}
});
//select chart type
$("#chartType").change(function (evt) {
var chartSelection = $("#chartType").val();
var timePeriod = $("#SelectPeriod").val();
var chart = c3.generate({
    data : {
        rows : data.slice(0, parseInt(timePeriod) + 1),
        type : chartSelection
    },
    axis : {
        x : {
            tick : {
                format : function (d) {
                    return formatMonth(d);
                }
            }
        }
    }
});
});
//select time period
$("#SelectPeriod").change(function (evt) {
var chartSelection = $("#chartType").val();
var timePeriod = $("#SelectPeriod").val();
var chart = c3.generate({
    data : {
        rows : data.slice(0, parseInt(timePeriod) + 1),
        type : chartSelection
    },
    axis : {
        x : {
            tick : {
                format : function (d) {
                    return formatMonth(d);
                }
            }
        }
    }
});
});
//function for months
function formatMonth(d) {
if (!d) {
return "JAN";
}
var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
return month = months[d];
}

Answer 1

更新 2：

http://jsfiddle.net/jygh8obh/28/

.HTML：

<select id="SelectPeriod">
    <option value="-1">January to this month</option>
    <option value="3">Last 3 months</option>
    <option value="6">Last 6 months</option>
    <option value="9">Last 9 months</option>
    <option value="12">Last 12 months</option>
</select>

JQ：

//select time period
$("#SelectPeriod").change(function (evt) {
    var chartSelection = $("#chartType").val();
    var timePeriod = $("#SelectPeriod").val();
    if (timePeriod == -1) timePeriod = currentMonth + 1;
    var end=currentMonth+2;
    var start=end-timePeriod;
    var data2=[];    
    data2.push(data[0]);    
    data2=data2.concat(data.slice(start, end));
    //alert(start+'/'+end+'='+data2)
    var chart = c3.generate({
        data: {
            rows: data2,
            type: chartSelection
        },
        axis: {
            x: {
                tick: {
                    format: function (d) {
                        return formatMonth(d);
                    }
                }
            }
        }
    });
});
//function for months
function formatMonth(d) {
    var timePeriod = $("#SelectPeriod").val();
    if (timePeriod == -1) timePeriod = currentMonth + 1;
    timePeriod--;
    d=currentMonth-timePeriod+d;
    if (!d) {
        return "JAN";
    }
    var months = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
    return month = months[d];
}

Answer 2

@dm4web的解决方案运行良好。和你的最后一个请求解决方案：在第一行添加这个

var currentMonth = new Date().getMonth();
$('#SelectPeriod').find('option:first').val(currentMonth +1); 

附言 添加currentMonth +1是因为参考是一月。如果你想要二月到一个月，你必须像.val(currentMonth +1)