javascript - Highcharts x 轴日期分组不起作用

Question

在 x 轴类别中使用动态生成的日期数组时，我遇到一个问题。起初，我尝试使用硬编码的日期值，效果非常好。下面是我的 JavaScript 代码片段:-

var TempDates = [
  '2018-01-01',
  '2018-01-02',
  '2018-01-03',
  '2018-01-04',
  '2018-01-05',
  '2018-01-06',
  '2018-01-07',
  '2018-01-08',
  '2018-01-09',
  '2018-01-10',
  '2018-01-11',
  '2018-01-12',
  '2018-02-01',
  '2018-02-02',
  '2018-02-03',
  '2018-02-04',
  '2018-02-05',
  '2018-02-06',
  '2018-02-07',
  '2018-02-08',
  '2018-02-09',
  '2018-02-10',
  '2018-02-11',
  '2018-02-12',
  '2018-03-01',
  '2018-03-02',
  '2018-03-03',
  '2018-03-04',
  '2018-03-05',
  '2018-03-06'
    ];
var Dates = TempDates.map(function (date) {
        let formatOptions = { month: '2-digit', day: '2-digit', year: 'numeric' };
        return new Date(date).toLocaleDateString(undefined, formatOptions);
    });

上面的代码运行没有出现任何错误。现在，当我尝试使用通过 Ajax 调用生成的数组时，我遇到了问题。下面给出的是我使用的代码:-

$.ajax({
        type: "POST",
        url: '@Url.Action("GetLastDates", "abc")',
        dataType: "json",
        contentType: "application/json",
        async: false,
        success: function (data) {
            for (var i in data) {
                TempDates1.push((data[i]));
            }
        }
    });

var Dates = TempDates1.map(function (date) {
    let formatOptions = { month: '2-digit', day: '2-digit', year: 'numeric' };
    return new Date(date).toLocaleDateString(undefined, formatOptions);
});

TempDates1 输出:-

["2018-09-04", "2018-09-05", "2018-09-06", "2018-09-07", "2018-09-08", "2018-09-09", "2018-09-10", "2018-09-11", "2018-09-12", "2018-09-13", "2018-09-14", "2018-09-15", "2018-09-16", "2018-09-17", "2018-09-18", "2018-09-19", "2018-09-20", "2018-09-21", "2018-09-22", "2018-09-23", "2018-09-24", "2018-09-25", "2018-09-26", "2018-09-27", "2018-09-28", "2018-09-29", "2018-09-30", "2018-10-01", "2018-10-02", "2018-10-03"]

错误:-“未捕获 RangeError:highcharts_date_range_grouping.min.js 处 Date.toISOString () 的时间值无效:1

注意:-我使用的日期类型与 TempDates 数组中使用的日期类型相同。

请帮助我，因为我在过去的 8 个小时里一直被这个问题困扰。有一些我无法得到的技巧。

Highcharts 代码:-

Highcharts.chart('abc_Chart', {
        chart: {
            type: 'column'
        },
        dateRangeGrouping: {
            dayFormat: { month: 'numeric', day: 'numeric', year: 'numeric' }, weekFormat: { month: 'numeric', day: 'numeric', year: 'numeric' }, monthFormat: { month: 'numeric', year: 'numeric' }
        },
        title: {
            text: 'Total Message Count'
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: Dates
        },
        yAxis: {
            title: {
                text: 'Count'
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        series: [{
            name: 'Received',
            stack: 'Received',
            color: '#058DC7',
            data: [
              7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
              3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
              31.0, 43.0, 34.0, 22.0, 19.0, 11.0
            ],
        }, {
            name: 'Failure',
            stack: 'Sent',
            color: '#ff0000',
            data: [
             3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
             7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
             32.0, 53.0, 14.0, 27.0, 19.0, 14.0
            ],
            legendIndex: 1,
        },
         {
             name: 'Success',
             stack: 'Sent',
             color: '#50B432',
             data: [
               3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
               7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
               32.0, 53.0, 14.0, 27.0, 19.0, 14.0

             ],
             legendIndex: 0,
         }]
    });

Answer 1

我已经在 jsfiddle 中尝试了您的代码，即使使用您添加的后续数据，它似乎也能正常工作。

我想说问题在于 ajax 调用是异步的，并且在渲染图表时您的 Dates 数组并未填充。尝试以在加载数据后构造图表的方式重写代码。像这样的事情:

$.ajax({
    type: "POST",
    url: '@Url.Action("GetLastDates", "abc")',
    dataType: "json",
    contentType: "application/json",
    async: false,
    success: function (data) {
        for (var i in data) {
            TempDates1.push((data[i]));
        }
        ctd(TempDates1);
    }
});

function ctd( data ){
    var Dates = data.map(function (date) {
        let formatOptions = { month: '2-digit', day: '2-digit', year: 'numeric' };
        return new Date(date).toLocaleDateString(undefined, formatOptions);
    });

    Highcharts.chart('abc_Chart', {
    chart: {
        type: 'column'
    },
    dateRangeGrouping: {
        dayFormat: { month: 'numeric', day: 'numeric', year: 'numeric' }, weekFormat: 
                   { month: 'numeric', day: 'numeric', year: 'numeric' }, monthFormat: { month: 'numeric', year: 'numeric' }
    },
    title: {
        text: 'Total Message Count'
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: Dates
    },
    yAxis: {
        title: {
            text: 'Count'
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    series: [{
        name: 'Received',
        stack: 'Received',
        color: '#058DC7',
        data: [
          7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
          3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
          31.0, 43.0, 34.0, 22.0, 19.0, 11.0
        ],
    }, {
        name: 'Failure',
        stack: 'Sent',
        color: '#ff0000',
        data: [
         3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
         7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
         32.0, 53.0, 14.0, 27.0, 19.0, 14.0
        ],
        legendIndex: 1,
    },
     {
         name: 'Success',
         stack: 'Sent',
         color: '#50B432',
         data: [
           3.0, 4.0, 5.0, 8.0, 11.0, 15.0, 17.0, 16.0, 14.0, 10.0, 6.0, 4.0,
           7.0, 6.0, 9.0, 14.0, 18.0, 21.0, 25.0, 26.0, 23.0, 18.0, 13.0, 9.0,
           32.0, 53.0, 14.0, 27.0, 19.0, 14.0

         ],
         legendIndex: 0,
     }]
});
}