在Chart.js中将X轴标签格式化为时间值 [英] Formatting x-axis labels as time values in Chart.js

问题描述

使用chart.js，我想将我的底部图表标签重新格式化为MM DD格式(即2月2日)如何获取chart.js将数据识别为日期并将其转换?它来自我的csv文件:2020-02-06

Using chart.js I would like to reformat my bottom chart labels into MM DD format (ie. Feb 2) How do I get chart.js to recognize the data as dates and convert it? It comes in like this from my csv file: 2020-02-06

这是我的chart.js编码，但似乎不起作用.

Here is my chart.js coding but it doesn't seem to work.

    data: {
            labels: dollar.years,
            datasets: [
              {label: 'Cdn dollar in cents',
                data: dollar.vals,
                fill: false,
                borderColor: '#4BD0B0',
                pointRadius: 0,
                borderWidth: 8
              }
                      ]
                },

          options: {
          legend:{
          display:false,
          usePointStyle: true,

          labels: {
          boxwidth:10,
          rotation:90
                    }
                  },

          scales: {

          yAxes: [{
          gridLines:{
          display:true
                    },

          ticks: {
          min: .74,
          max: .76,
          stepSize: .025,
                }
                }],

          xAxes: [{
          gridLines:{
          display:true
                },
          ticks: {
          labelOffset: 1,
                },
                  }],
                  }
                  }
        });
      }

推荐答案

您所需要做的就是将 xAxis 定义为

All you need is to define your xAxis as a time cartesian axis with a 'day' unit.

默认的显示格式"day"是"MMM D"(例如"Feb 2").

The default display format of 'day' is 'MMM D' (for instance 'Feb 2').

options: {
    ...
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'day',
                tooltipFormat: 'MMM DD' 
            }
            ...
        }]
    }
    ... 
}

请查看以下可运行的代码段:

Please have a look at the following runnable code snippet:

new Chart(document.getElementById('myChart'), {
  type: 'line',  
  data: {
    labels: ['2020-02-06', '2020-02-07', '2020-02-08', '2020-02-09', '2020-02-10', '2020-02-11', '2020-02-12'],
    datasets: [{
      label: 'My Dataset',
      data: [0.758, 0.756, 0.755, 0.754, 0.753, 0.758, 0.76],
      fill: false,
      backgroundColor: 'green',
      borderColor: 'green'
    }]
  },
  options: {
    responsive: true,
    title: {
      display: false
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: .74,
          max: .76,
          stepSize: .005
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day',
          tooltipFormat: 'MMM DD'
        }
      }],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

这篇关于在Chart.js中将X轴标签格式化为时间值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！