Как отобразить значения столбцов в Chart JS с плагином datalabels?

Question

Не получается отобразить значения столбцов.И никак не могу понять в чем проблема. Если использовать в качестве даных масив, тогда все работает, но такой вариант не подходит, с обектом почему то проблема.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

</head>

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


  <script>
    let chartData2022 = [{
        "type": "column",
        "name": "Выработка (без счетчика)",
        "stacking": "normal",
        "data": [
          [
            1643673600000,
            508.26
          ],
          [
            1646092800000,
            1326.07
          ],
          [
            1648771200000,
            1432.12
          ],
          [
            1651363200000,
            841.44
          ]
        ],
        "index": 3,
        "color": "#F7C002",
        "fillOpacity": 0,
        "yAxis": "kWh",
        "id": "FromGenToSomewhere",
        "threshold": 0,
        "tooltip": {
          "valueSuffix": "kWh",
          "valueDecimals": 2
        },
        "dashStyle": "solid"
      },
      {
        "type": "column",
        "name": "Энергия в сеть",
        "stacking": "normal",
        "data": [
          [
            1651363200000,
            19.67
          ],
          [
            1654041600000,
            55.63
          ],
          [
            1656633600000,
            52.62
          ],
          [
            1659312000000,
            28.89
          ],
          [
            1661990400000,
            11.35
          ],
          [
            1664582400000,
            17.11
          ],
          [
            1667260800000,
            0.22
          ],
          [
            1669852800000,
            0.12
          ]
        ],
        "index": 1,
        "color": "#999999",
        "fillOpacity": 0,
        "yAxis": "kWh",
        "id": "FromGenToGrid",
        "threshold": 0,
        "tooltip": {
          "valueSuffix": "kWh",
          "valueDecimals": 2
        },
        "dashStyle": "solid"
      },
      {
        "type": "column",
        "name": "Непосредственно потреблено",
        "stacking": "normal",
        "data": [
          [
            1651363200000,
            1365.54
          ],
          [
            1654041600000,
            1902.08
          ],
          [
            1656633600000,
            1997.85
          ],
          [
            1659312000000,
            1519.01
          ],
          [
            1661990400000,
            1002.38
          ],
          [
            1664582400000,
            897.61
          ],
          [
            1667260800000,
            216.49
          ],
          [
            1669852800000,
            111.56
          ]
        ],
        "index": 6,
        "color": "#FAD967",
        "fillOpacity": 0,
        "yAxis": "kWh",
        "id": "FromGenToConsumer",
        "threshold": 0,
        "tooltip": {
          "valueSuffix": "kWh",
          "valueDecimals": 2
        },
        "dashStyle": "solid"
      }
    ];

    let chartData2023 = [{
        "type": "column",
        "name": "Энергия в сеть",
        "stacking": "normal",
        "data": [
          [
            1672531200000,
            0.05
          ],
          [
            1675209600000,
            0.71
          ],
          [
            1677628800000,
            5.55
          ],
          [
            1680307200000,
            16.06
          ],
          [
            1682899200000,
            46.83
          ],
          [
            1685577600000,
            43.9
          ],
          [
            1688169600000,
            37.09
          ],
          [
            1690848000000,
            29.79
          ],
          [
            1693526400000,
            18.11
          ],
          [
            1696118400000,
            2.52
          ],
          [
            1698796800000,
            0.31
          ],
          [
            1701388800000,
            0.03
          ]
        ],
        "index": 1,
        "color": "#999999",
        "fillOpacity": 0,
        "yAxis": "kWh",
        "id": "FromGenToGrid",
        "threshold": 0,
        "tooltip": {
          "valueSuffix": "kWh",
          "valueDecimals": 2
        },
        "dashStyle": "solid"
      },
      {
        "type": "column",
        "name": "Непосредственно потреблено",
        "stacking": "normal",
        "data": [
          [
            1672531200000,
            114.62
          ],
          [
            1675209600000,
            546.88
          ],
          [
            1677628800000,
            1030.34
          ],
          [
            1680307200000,
            1014.5
          ],
          [
            1682899200000,
            2161.9
          ],
          [
            1685577600000,
            2017.15
          ],
          [
            1688169600000,
            2088.56
          ],
          [
            1690848000000,
            2074.1
          ],
          [
            1693526400000,
            1485.34
          ],
          [
            1696118400000,
            876.45
          ],
          [
            1698796800000,
            307.18
          ],
          [
            1701388800000,
            201.49
          ]
        ],
        "index": 6,
        "color": "#FAD967",
        "fillOpacity": 0,
        "yAxis": "kWh",
        "id": "FromGenToConsumer",
        "threshold": 0,
        "tooltip": {
          "valueSuffix": "kWh",
          "valueDecimals": 2
        },
        "dashStyle": "solid"
      }
    ];

    function processChartData(chartData) {
      const energyToGridData = {};
      const consumerData = {};
      const genToSomewhere = {};
      chartData.forEach(chartItem => {
        chartItem.data.forEach(dataPoint => {
          if (chartItem.id === 'FromGenToGrid') {
            processEnergyToGridData(dataPoint, energyToGridData);
          } else if (chartItem.id === 'FromGenToConsumer') {
            processConsumerData(dataPoint, consumerData);
          } else if (chartItem.id === 'FromGenToSomewhere') {
            processGenToSomewhere(dataPoint, genToSomewhere);
          }
        });
      });

      return {
        energyToGridData,
        consumerData,
        genToSomewhere,
      }
    }

    function processEnergyToGridData(dataPoint, energyToGridData) {
      let times = dataPoint[0];
      times = new Date(times);
      let formatedTimes = times.toLocaleDateString('uk-UA', {
        month: 'long'
      });
      if (!energyToGridData[formatedTimes]) {
        energyToGridData[formatedTimes] = 0;
      }
      energyToGridData[formatedTimes] += dataPoint[1];
    }

    function processConsumerData(dataPoint, consumerData) {
      let times = dataPoint[0];
      times = new Date(times);
      let formatedTimes = times.toLocaleDateString('uk-UA', {
        month: 'long'
      });

      if (!consumerData[formatedTimes]) {
        consumerData[formatedTimes] = 0;
      }
      consumerData[formatedTimes] += dataPoint[1];
    }

    function processGenToSomewhere(dataPoint, genToSomewhere) {
      let times = dataPoint[0];
      times = new Date(times);
      let formatedTimes = times.toLocaleDateString('uk-UA', {
        month: 'long'
      });

      if (!genToSomewhere[formatedTimes]) {
        genToSomewhere[formatedTimes] = 0;
      }
      genToSomewhere[formatedTimes] += dataPoint[1];
    }

    const chartDataResult2022 = processChartData(chartData2022);
    const chartDataResult2023 = processChartData(chartData2023);

    function mergeObjects(obj1, obj2, obj3) {
      const result = {};

      // Додаємо значення для obj1
      for (const key in obj1) {
        if (obj1.hasOwnProperty(key)) {
          result[key] = obj1[key];
        }
      }

      // Додаємо значення для obj2
      for (const key in obj2) {
        if (obj2.hasOwnProperty(key)) {
          result[key] = (result[key] || 0) + obj2[key];
        }
      }

      // Додаємо значення для obj3
      for (const key in obj3) {
        if (obj3.hasOwnProperty(key)) {
          result[key] = (result[key] || 0) + obj3[key];
        }
      }

      return result;
    }

    const totalkWh2022 = mergeObjects(chartDataResult2022.energyToGridData, chartDataResult2022.consumerData, chartDataResult2022.genToSomewhere);
    const totalkWh2023 = mergeObjects(chartDataResult2023.energyToGridData, chartDataResult2023.consumerData, chartDataResult2023.genToSomewhere);
    const monthData = ['січень', 'лютий', 'березень', 'квітень', 'травень', 'червень', 'липень', 'серпень', 'вересень', 'жовтень', 'листопад', 'грудень'];

    const kv2023 = Object.values(totalkWh2023);
    console.log(chartDataResult2023);
    Chart.register(ChartDataLabels);

    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: monthData,
        datasets: [{
            label: '# кВт 2023',
            data: totalkWh2023,
            borderWidth: 1,
          },
          {
            label: '# кВт 2022',
            data: totalkWh2022,
            borderWidth: 1,
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        plugins: {
          datalabels: {
            anchor: 'end',
            align: 'top',
            font: {
              weight: 'bold'
            },
            formatter: function(value, context) {
              console.log(context);
              return value;
            }
          }
        }
      }
    });
  </script>


</body>

</html>

БЛОГ НА HUSL

Как отобразить значения столбцов в Chart JS с плагином datalabels?

Ответы (0 шт):