Chart.js 根据时间单位对 y 值求和

Question

Chart.js 的新手，我想知道是否有内置方法根据时间单位对 y 值求和。
在文档中进行大量搜索后在这里询问。

目前，3 月的柱形显示 20，6 月的柱形显示 10。
我想 3 月有 25 个，6 月有 15 个，所以对同月的 y 求和。

const ctx = document.getElementById("tests-chart")
const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data: [
                    { x: "24/03/2022", y: 20 },
                    { x: "25/03/2022", y: 5 },
                    { x: "24/06/2022", y: 10 },
                    { x: "25/06/2022", y: 5 },
                ],
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
  <canvas id="tests-chart"></canvas>
</div>

Answer 1

您可以如下所述操作您的数据集并实现您的预期输出。

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

let updatedData =[];
let tempDateCollection =[];

data.map((yData , index)=> {

  const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');

  if(tempDateCollection.includes(formatedDate)){
    const index = tempDateCollection.indexOf(formatedDate);
    const element = updatedData[index];
    updatedData[index] = {...element, y: element.y + yData.y}
  } else{
    tempDateCollection.push(formatedDate);
    updatedData.push(yData);
  }
  
})

const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data:updatedData,
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="tests-chart"></canvas>
</div>

Chart.js 根据时间单位对 y 值求和

Chart.js sum y values depending on time unit

javascript

chart.js