getting an hour instead of date

问题描述 投票：0回答：1

I have a time series that is a CSV file (pastebin link). I am trying to plot the cumulative time (one of the columns) on the Y axis with the date on the X axis and the tooltip as the task completed. The Y axis and the tooltip work fine but the X-axis date does not. Instead of getting a date on the X-axis, I get a time. I am not sure why that is. Can someone help, please?

If I can better share these files with you, please let me know and I can try and do that for your convenience.

Outcome:

enter image description here

HTML (Paste bin):

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Task progress scatter chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Load jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Load Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
    <!-- Load D3.js to read csv files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  </head>

  <body>
    <canvas id="container" style="width:100%; height:400px;"></canvas>
    <script src="./script_ed5101.js"></script>
  </body>

</html>

Java script (Paste bin) with Chart:

$(document).ready(function() {

  var TITLE = 'Task progress';

  var POINT_X = 'date'; // column name for x values in data csv 
  var POINT_X_PREFIX = ''; // prefix for x values, eg '$'
  var POINT_X_POSTFIX = ''; // postfix for x values, eg '%'

  var POINT_Y = 'cumulative'; // column name for y values in data.csv
  var POINT_Y_PREFIX = ''; // prefix for x values, eg 'USD '
  var POINT_Y_POSTFIX = ''; // postfix for x values, eg ' kg'

  var POINT_NAME = 'task'; // point names that appear in tooltip
  var POINT_COLOR = 'rgba(0,0,255,0.7)'; // point color, eg `black` or `rgba(10, 100, 44, 0.8)`
  var POINT_RADIUS = 3; // radius of each data point

  var X_AXIS = 'Date';  // x-axis label and label in tooltip
  var Y_AXIS = 'Cumulative time on tasks'; // y-axis label and label in tooltip

  var SHOW_GRID = true; // `true` to show the grid, `false` to hide

  // Read data file and create a chart
  d3.csv('./time_series.csv').then(function(rows) {

    var data = rows.map(function(row) {
      return {
        x: row[POINT_X],
        y: row[POINT_Y],
        name: row[POINT_NAME]
      }
    })

        var scatterChartData = {
            datasets: [{
                label: 'task progress',
                backgroundColor: POINT_COLOR,
        data: data,
        pointRadius: POINT_RADIUS,
        pointHoverRadius:  POINT_RADIUS + 2,
            }]
    };

    var ctx = document.getElementById('container').getContext('2d');

    Chart.Scatter(ctx, {
      data: scatterChartData,
      options: {
        title: {
          display: true,
          text: TITLE,
          fontSize: 14,
        },
        legend: {
          display: false,
        },
        scales: {
          xAxes: [{
            type: 'time',
        distribution: 'series',       
            scaleLabel: {
              display: true,
              labelString: X_AXIS
            },
            gridLines: {
              display: SHOW_GRID,
            },
            ticks: {
              callback: function(value, index, values) {
                return POINT_X_PREFIX + value.toLocaleString() + POINT_X_POSTFIX;
              }
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: Y_AXIS
            },
            gridLines: {
              display: SHOW_GRID,
            },
            ticks: {
              callback: function(value, index, values) {
                return POINT_Y_PREFIX + value.toLocaleString() + POINT_Y_POSTFIX;
              }
            }
          }]
        },
        tooltips: {
          displayColors: false,
          callbacks: {
            title: function(tooltipItem, all) {
              return [
                all.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].name,
              ]
            },
            label: function(tooltipItem, all) {
              return [
                X_AXIS + ': ' + POINT_X_PREFIX + tooltipItem.xLabel.toLocaleString() + POINT_X_POSTFIX,
                Y_AXIS + ': ' + POINT_Y_PREFIX + tooltipItem.yLabel.toLocaleString() + POINT_Y_POSTFIX
              ]
            }
          }
        }
      }
    });

  });
});
javascript chart.js
1个回答
1
投票

You could define time.unit option 'day' on your xAxis as explained here. This will display the xAxis tick mark in the default display format defined for 'day'.

xAxes: [{
  type: 'time',
  time: { 
    unit: 'day'     
  }
  ...

In case you want the date to be displayed in a different format, the definition could look as follows.

xAxes: [{
  type: 'time',
  time: { 
    unit: 'day',
    displayFormats: {
      day: 'YYYY-MM-DD'
    },
    tooltipFormat: 'YYYY-MM-DD'
  }

See Moment.js for the allowable format strings.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.