Ось диаграммы x отображается в метке времени вместо даты Chart.js - PullRequest
Новая
       65

Ось диаграммы x отображается в метке времени вместо даты Chart.js

0 голосов
/ 12 ноября 2019

Я делаю график JSON с диаграммой JS. Даже если я установлю форматированный на дату, я все еще получаю метку времени. Я надеюсь, что кто-то может мне помочь. Кстати, данные извлекаются из базы данных. Я прилагаю код, который использую.

Заранее спасибо.

Вывод:

Желаемый вывод:

enter image description here

Код: 

            var currentDate= val.date; //Extracting the date value in dd/mm/yyyy format from the mentioned text box

Я получаю данные из базы данных

                     //Printing the extracted date value before making the change
                    var newDate = currentDate.split('/'); //Splitting the extracted date value using the delimiter /, which is the seperator used in the date value         
                    currentDate = newDate[1] + "/" + newDate[0] + "/" + newDate[2];//Constructing a new date value (string) using the splitted values.

Я форматирую его в MMDDYYYY 

var dateObject = new Date(currentDate);

Затем он изменяется на тип данных даты 

var data_point={
  x:dateObject,
  y:parseFloat(val.sa_quantity)
};
datapoints.push(data_point);

Я добавляю все данные, измененные в массивкоторый используется для построения графика данных 

var chartData = [];
      var ctxR = document.getElementById("data_chart").getContext('2d');
      var myChart = new Chart(ctxR, {
        type: 'scatter',
        data: {
          labels:dates,
          datasets: [{
            label: 'Predicted Sales($)',
            data: datapoints
          }]
        },
        responsive: true,
            title:{
                display: true,
                text:"Chart.js Time Scale"
            },
            scales:{
                xAxes: [{
                  type: 'time',
                  time: {
                    displayFormats: {
                      'millisecond': 'MMM DD',
                      'second': 'MMM DD',
                      'minute': 'MMM DD',
                      'hour': 'MMM DD',
                      'day': 'MMM DD',
                      'week': 'MMM DD',
                      'month': 'MMM DD',
                      'quarter': 'MMM DD',
                      'year': 'MMM DD',
                    },
                    round: 'day',
                    unit: 'day',
                  }
                }]
            }
        });
        myChart.update();
...