在chart.js中，如何在1月到12月到10月到9月的行\图表上更改x轴？基本上，会计年度而不是日历年

Question

我的折线图有多行，每年一行。每行上的点都有正确的日期，但图表从1月而不是10月开始，我无法弄清楚如何从10月开始。即使点日期是正确的，例如，2014年1月10日或2015年9月30日，我已将格式化的日期年改为同一年，因此所有行都将在同一个月显示。

以下是生成的图表和相关代码。

        //process the data for all charts except dredge depth as it will function differently
        if (reportType !== "dredgedepth") {
            yValueKey = "DAY_VALUE";
            xValueKey = "Date";
            var CumulativeDayTotal = 0;
            var formattedDate, _date; code:
            var data, lineColor, monthName;
            var chartPlaceHolders = "";


            //loop through each year to build our objects needed for the chart
            $.each(jsonData.results, function (i, row) {
                data = row.dt;
                CumulativeDayTotal = 0
                yAxis = [];

                $.each(data, function (i, row) {
                    CumulativeDayTotal = parseInt(row[yValueKey]) + parseInt(CumulativeDayTotal);
                    //if not a cumulative report then set dates to be in the same year so chartjs will stack our lines
                    //instead of spreading across multiple years, this way it reads it as the same year so we can get functionality
                    formattedDate = row["DATE_F"];
                    if (nsData.myChartFormat !== "cumulative") {
                        formattedDate = moment(formattedDate).year(2016);
                    }
                    formattedDate = formatDate(formattedDate);
                    yAxis.push("{ y: " + CumulativeDayTotal + ", x: '" + formattedDate + "'}");
                });
                //create color for each new line/year
                lineColor = dynamicColors(i);

                chartPlaceHolders += '{label:"';

                if (nsData.myChartFormat === "fiscal") {
                    chartPlaceHolders += 'FY ';
                }

                chartPlaceHolders += row.year + '", data:[' + yAxis + '],' +
                    'fill: false,' +
                    'lineTension: 0.1,' +
                    'backgroundColor: "' + lineColor + '",' +
                    'borderColor: "' + lineColor + '",' +
                    'borderCapStyle: "butt",' +
                    'borderDash: [],' +
                    'borderDashOffset: 0.0,' +
                    'borderJoinStyle: "miter",' +
                    'pointBorderColor: "rgba(75,192,192,1)",' +
                    'pointBackgroundColor: "#fff",' +
                    'pointBorderWidth: .2,' +
                    'pointHoverRadius: 1,' +
                    'pointHoverBackgroundColor: "rgba(75,192,192,1)",' +
                    'pointHoverBorderColor: "rgba(220,220,220,1)",' +
                    'pointHoverBorderWidth: 0,' +
                    'pointRadius: 2,' +
                    'pointHitRadius: .75,' +
                    'pointHitDetectionRadius : .75' +
               '},';

            });
        }
        //remove last comma from string
        chartPlaceHolders = chartPlaceHolders.replace(/,\s*$/, "");
        chartPlaceHolders = "[" + chartPlaceHolders + "]";

        var initFields = eval("(" + chartPlaceHolders + ")");

        //call newly created elements into a variable to pass along to the other functions
        var ctx = $("#primaryChart")[0].getContext("2d");

        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: initFields
            },
            options: {
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: yAxisLabel
                        }
                    }],
                    xAxes: [{
                        type: 'time',
                        unit: 'month',
                        time: {
                            unit: 'month',
                            tooltipFormat: tooltipDateFormat,
                            displayFormats: {
                                millisecond: xAxisDateFormat,
                                second: xAxisDateFormat,
                                minute: xAxisDateFormat,
                                hour: xAxisDateFormat,
                                day: xAxisDateFormat,
                                week: xAxisDateFormat,
                                month: xAxisDateFormat,
                                quarter: xAxisDateFormat,
                                year: xAxisDateFormat
                            }
                        },
                        scaleLabel: {
                            display: true,
                            labelString: xAxisLabel
                        }
                    }]
                }
            }
        });

Answer 1

解决方案是让财政年度正确：

                $.each(data, function (i, row) {
                    CumulativeDayTotal = parseInt(row[yValueKey]) + parseInt(CumulativeDayTotal);
                    // MLP 12/22/16: If not a cumulative report then set dates to be in the same year (2016)
                    // so chartjs will stack lines instead of spreading across multiple years. This was Austin
                    // Martin's code. I assume he chose 2016 because it is a leap year and will include
                    // February 29 in case the user selects a date range that includes Feb 29.
                    formattedDate = row["DATE_F"];
                    if (nsData.myChartFormat !== "cumulative") {
                        formattedDate = moment(formattedDate).year(2016);
                    }
                    // MLP 12/22/16: If fiscal chart, set October 1 through December 31 to 2015
                    // so char will show October through September instead of January through December.

下面：

                    if (nsData.myChartFormat === "fiscal") {
                        if (moment(formattedDate).format("YYYY/MM/DD") >= "2016/10/01") {
                            formattedDate = moment(formattedDate).year(2015);
                        }
                    }




                    // MLP 12/13/16: format date to UTC MM/DD/YYYY using momentJS because the JavsScript
                    // Date function converts dates to the local time zone.
                    formattedDate = formatDateUtc(formattedDate);
                    yAxis.push("{ y: " + CumulativeDayTotal + ", x: '" + formattedDate + "'}");
                });