时间戳

首页 > 解决方案 > ChartJs 星期几来自数字

chart.js - ChartJs 星期几来自数字

问题描述

我有一个图表，数据看起来像这样，其中X代表一周中的几天：

{x: 1, y: 18, r: 4.7614}
{x: 6, y: 17, r: 4.7619}
{x: 0, y: 16, r: 4.7657}

在此处输入图像描述

我想将数字重命名为 X 轴上的工作日（0：“星期日”，1：“星期一”）等，但我无法弄清楚。

我的配置如下所示：（但显然不起作用）。任何帮助将不胜感激，谢谢。

const config = {
    type: "bubble",
    data: data,
    options: {
      responsive: true,
      scales: {
        x: ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"],
      },
    },
  }

标签： chart.js

解决方案

您可以使用 tickCallback 将值转换为您喜欢的任何值，最简单的方法是创建一个包含所有 weekDays 的数组，然后将该值用作索引，如下所示：

const weekDays = ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"];

const options = {
  type: 'bubble',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 0,
        y: 1,
        r: 4
      }, {
        x: 1,
        y: 1,
        r: 4
      }, {
        x: 2,
        y: 1,
        r: 4
      }, {
        x: 3,
        y: 1,
        r: 4
      }, {
        x: 4,
        y: 1,
        r: 4
      }, {
        x: 5,
        y: 1,
        r: 4
      }, {
        x: 6,
        y: 1,
        r: 4
      }],
      backgroundColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: (val) => (weekDays[val])
        }
      }
    }
  }
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

推荐阅读