Question

我正在尝试使用cross origin库创建图表。 X轴必须是具有以下时间格式的时间轴：Chart.js，但是在图表上它给出了错误的日期，甚至我的数据也无法正确显示。如果我删除DD-MM-YYYY HH:MM:SS部分，其余的工作正常。有什么问题？我如何从HH:MM:SS中显示时间？

这是我的小提琴：http://jsfiddle.net/vaxobasilidze/ak1vmj9q/

DD-MM-YYYY HH:MM:SS

function factorData(data) {
  let _data = data.map((e, i, a) => {
    let prev = a[i - 1];
    let next = a[i + 1];
    if (e === prev && e === next) return '' + e;
    return e;
  }).map(e => typeof e === 'string' ? null : e);
  return _data;
}

var ctx = document.getElementById('chart').getContext('2d');

var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/

var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});


var timeFormat = "DD-MM-YYYY HH:MM:SS";

var options = {
  type: 'line',
  data: {
    datasets: [{
      fillColor: gradient1,
      backgroundColor: gradient1,
      borderColor: gradient1,
      fill: 'origin',
      strokeColor: gradient1,
      pointBackgroundColor: "#00b2ff",
      pointRadius: 2,
      pointBorderWidth: 0,
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
      data: datas,
      steppedLine: true,
      spanGaps: true
    }, ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    datasetStrokeWidth: 1,
    pointDotRadius: 3,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 1,
    tooltipFillColor: "rgba(120,0,0,0.8)",
    tooltipFontStyle: "bold",
    animation: false,
    scaleFontColor: "#ffffff",
    scaleFontStyle: "bold",
    scales: {
      xAxes: [{
        type: "time",
        time: {
          format: timeFormat,
          tooltipFormat: 'll',
          min: new Date(2001, 1, 4, 1, 0, 0, 0),
        },
        ticks: {
          maxTicksLimit: 21,
          minRotation: 90,
          fontColor: '#ffffff'
        },

        gridLines: {
          color: "#444444"
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: '#ffffff'
        },
        gridLines: {
          color: "#444444"
        },
      }]
    }
  },
}

var myLineChart = new Chart(ctx, options);

Answer 1

我相信您正在寻找DD-MM-YYYY HH:mm:ss，请参见moment.js，以获取允许的格式标记列表（chart.js使用与指定的here相同的格式）。

MM是几个月的时间（因为您在DD-MM-YYYY部分中使用的是当前时间，而SS是小数秒。我不认为您希望其中任何一个都显示时间（这可能是错误的）小数秒，但绝对不是数分钟）

如果您希望标签上也有时间，则可以使用：

`type: "time",
time: {
   displayFormats:{ timeFormat },
   min: new Date(2001, 1, 4, 1, 0, 0, 0),
},`

这两种解决方案的总和如下图：

function factorData(data) {
  let _data = data.map((e, i, a) => {
    let prev = a[i - 1];
    let next = a[i + 1];
    if (e === prev && e === next) return '' + e;
    return e;
  }).map(e => typeof e === 'string' ? null : e);
  return _data;
}

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

var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(14, 22, 38, 1)');
gradient1.addColorStop(1, 'rgba(1, 103, 147, 0.7)');
/***************/

/* var datas = [];
var labelss = [];
var quantity = 50;
for (var i = 0; i < quantity; i++) {
  var test = Math.floor((Math.random() * 100) + 1);
  datas.push(test);
  labelss.push(i);
} */

var datas = [];
datas.push({x: "01-04-2001 10:05:46", y: 175});
datas.push({x: "01-10-2002 10:15:46", y: 140});
datas.push({x: "01-07-2003 11:47:26", y: 98});
datas.push({x: "01-10-2003 01:07:42", y: 130});
datas.push({x: "01-09-2006 06:55:46", y: 164});
datas.push({x: "01-04-2013 10:22:35", y: 178});
datas.push({x: "01-10-2015 10:05:46", y: 118});
datas.push({x: "01-10-2018 10:05:46", y: 158});


var timeFormat = "DD-MM-YYYY HH:mm:ss";

var options = {
  type: 'line',
  data: {
    //labels: labelss,
    datasets: [{
      fillColor: gradient1,
      backgroundColor: gradient1,
      borderColor: gradient1,
      fill: 'origin',
      strokeColor: gradient1,
      pointBackgroundColor: "#00b2ff",
      pointRadius: 2,
      pointBorderWidth: 0,
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(0, 178, 255, 1)",
      data: datas,
      steppedLine: true,
      spanGaps: true
    }, ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    datasetStrokeWidth: 1,
    pointDotRadius: 3,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 1,
    tooltipFillColor: "rgba(120,0,0,0.8)",
    tooltipFontStyle: "bold",
    animation: false,
    scaleFontColor: "#ffffff",
    scaleFontStyle: "bold",
    scales: {
      xAxes: [{
        type: "time",
        time: {
          displayFormats:{ timeFormat },
          min: new Date(2001, 1, 4, 1, 0, 0, 0)
        },
        ticks: {
          maxTicksLimit: 21,
          minRotation: 90,
          fontColor: '#ffffff'
        },

        gridLines: {
          color: "#444444"
        }
      }],
      yAxes: [{
        ticks: {
          fontColor: '#ffffff'
        },
        gridLines: {
          color: "#444444"
        },
      }]
    }
  },
}

var myLineChart = new Chart(ctx, options);

无法在chart.js时间轴上显示正确的时间

1 个答案: