Chart.js时间刻度轴显示大数字而不是日期

js81xvg6 于 2023-04-30 发布在 Chart.js

关注(0)|答案(1)|浏览(154)

我正在尝试创建一个google sheets web应用程序，它可以从电子表格中读取数据来生成这个图表，这就是为什么我使用vanilla JS。

function getEventEntries() {
  function createChart(args) {
    const ctx = document.getElementById("myChart").getContext("2d");
    const cfg = {
      type: 'scatter',
      data: {
        datasets: [{
          label: 'Events',
          data: args
         }],
         options: {
          scales: {
            x: { type: 'time' },
            y: { type: 'linear' }
          }
        }
      }
    };
    
    const myChart = new Chart(ctx, cfg);
  }
  
  //get data from google sheets
  //google.script.run.withSuccessHandler(createChart).getEntries();
  
  // dummy data tests to figure out what formats will work
  var events = [{x: '2021-11-06 23:39:30', y: -3}, {x: '2008-04-12 13:30:14', y: 10}];
  var events1 = [{x: new Date('2021-11-06'), y: -3}, {x: new Date('2008-04-12'), y: 10}]; // actually plots data and creates an x-axis that isn't 0 to 1--still not showing date values for ticks tho
  
  createChart(events1);
}

function onLoad() {
  getEventEntries();
}

$(document).ready(onLoad);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<!-- I've tried date-fns and moment.js adapters with no luck either -->
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1"></script>

 <canvas id="myChart"></canvas>

正如您在运行我的代码片段时所看到的，x轴没有以任何格式列出日期。只是大数字而已。我想让它列出可读的日期，也许是MMM YYYY格式。

chart.js

来源：https://stackoverflow.com/questions/76077626/chart-js-time-scale-axis-showing-large-numbers-instead-of-dates

1条答案

按热度按时间

gijlo24d1#

假设您使用的是Chart.js的latest版本，您需要传递正确的configuration对象，以便它可以按照提供的format渲染dates。你可以试试这样的东西：

const cfg = 
  {
    type: 'scatter',
    data: {
      datasets: [
        {
          labels: "Events",          
          data: args,
        }
      ]
    },
    options: {
      scales: {
        x: [ {
            display: true,
            type: 'time',
            time: {
              parser: 'MM/DD/YYYY HH:mm',
              tooltipFormat: 'll HH:mm',
              unit: 'day',
              unitStepSize: 1,
              displayFormats: {
                'day': 'MM/DD/YYYY'
              }
            }
          }
        ],
        y: [
          // etc...
        ],
      }
    }
  }
);

更新

对于旧版本的2.x或Chart.js，时标要求同时存在date library and corresponding adapter。默认情况下，图表。js包含一个Moment.js适配器。更多信息here.
参考文件：Time Axis Specific Options
希望有帮助！

工作液（Using Adapter）

你好，我想出来了。在Chartjs的最新版本4.2.1中，文档中提到
日期适配器时间刻度要求同时存在日期库和相应的适配器。
因此，你需要修改你的代码如下：

超文本标记语言

<canvas id="myCanvas"></canvas>

JavaScript

除了加载Chart.js脚本之外，还需要加载相应的适配器脚本date_fns.js和chartjs-adapter-date-fns-bundle.min.js

const options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Entries',
      data: [{
        x: '2021-11-06 23:39:30',
        y: 5
      }, {
        x: '2008-04-12 13:30:14',
        y: 10
      }],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

const ctx = document.getElementById('myCanvas').getContext('2d');
new Chart(ctx, options);

下面是工作fiddle以供参考。
适配器列表可以在这里找到。

赞(0）回复(0）举报 2023-04-30

我来回答

Chart.js时间刻度轴显示大数字而不是日期

1条答案

相关问题

热门标签

最新问答