时间戳

首页 > 解决方案 > ChartJS 时间轴未正确绘制 | 得到一个小时而不是日期

javascript - ChartJS 时间轴未正确绘制 | 得到一个小时而不是日期

问题描述

我有一个时间序列，它是一个 CSV 文件（pastebin 链接）。我正在尝试在 Y 轴上绘制累积时间（其中一列），在 X 轴上绘制日期，在任务完成时绘制工具提示。Y 轴和工具提示工作正常，但 X 轴日期不能。我没有在 X 轴上获得日期，而是获得了时间。我不确定为什么会这样。有人可以帮忙吗？

如果我能更好地与您分享这些文件，请告诉我，我可以尝试这样做以方便您。

结果：

在此处输入图像描述

HTML（粘贴箱）：

<!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 脚本（粘贴 bin ）：

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

  });
});

标签： javascriptchart.js

解决方案

您可以按照此处的说明在您的上定义time.unit选项“日” 。这将以为“天”定义的默认显示格式显示刻度线。xAxisxAxis

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

如果您希望日期以不同的格式显示，定义可能如下所示。

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

有关允许的格式字符串，请参阅Moment.js。

推荐阅读