Группировка даты по старшим диаграммам по оси X не работает - PullRequest
Новая
       0

Группировка даты по старшим диаграммам по оси X не работает

0 голосов
/ 03 октября 2018

Я столкнулся с одной проблемой при использовании динамически сгенерированного массива дат в категории по оси 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"]

Ошибка: - "Uncaught RangeError: Неверное значение времени в Date.toISOString () в highcharts_date_range_grouping.min.js: 1

Примечание: - Я использую тот же тип даты, что и в массиве TempDates.

Пожалуйста, помогите мне, поскольку я застрял с этим в течение последних 8 часов.уловка, которую я не могу получить.

Код Highchart: - 

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,
         }]
    });

1 Ответ

0 голосов
/ 03 октября 2018

Я попробовал ваш код в jsfiddle, и он, кажется, работает даже с более поздними данными, которые вы добавили.

Я бы сказал, что проблема в том, что вызов 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]));
        }
        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,
     }]
});
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...