Как отобразить данные data chartjs?

Question

Всем здравствуйте!Как можно отобразить данные data в новой версии chartjs?

У меня был chartjs2,мигрировал на chartjs3,но не отображаются данные data.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Chart.js 2 to 3</title>
  </head>
  <body>
    <div>
      <canvas id="сhart"></canvas>
    </div>
  </body>

  <script src="./chartjs3/chart.js"></script>
  <script src="./chartjs3/chart.min.js"></script>
  <script src="./chartjs3/chartjs-plugin-annotation.js"></script>
  <script src="./chartjs3/chartjs-plugin-annotation.min.js"></script>
  <script src="./chartjs3/chartjs-plugin-annotationLine.js"></script>
  
  
  <script src="./chartjs3/chartjs-plugin-datalabels.js"></script>
  <script src="./chartjs3/chartjs-plugin-datalabels.min.js"></script>
  <script src="./chartjs3/hammer.min.js"></script>
  
  <script>
   const ctx = document.getElementById("сhart").getContext("2d"); 
  const options = {
      type: "bar",
      responsive: true,
      maintainAspectRatio: false,
      title: { display: false },
      tooltips: {
        mode: "index",
        intersect: true,
        filter: (tooltipItem, chartData) => {
          return (
            !chartData.datasets[tooltipItem.datasetIndex].hideFromTooltip &&
            (chartData.datasets[tooltipItem.datasetIndex].yAxisID == "R" ||
              tooltipItem.yLabel > 0)
          );
        },
        callbacks: {
          label: function (tooltipItem, chartData) {
            return (
              chartData.datasets[tooltipItem.datasetIndex].label +
              ": " +
              tooltipItem.yLabel.round(0)
            );
          },
        },
      },
      animation: {
        duration: 500,
        easing: "linear",
      },
      plugins: {
        datalabels: {
          display: function (context) {
            const axisMax = context.chart.scales["L"]
              ? context.chart.scales["L"].max
              : 0;
            const datasetLabelsSettings =
              context.chart.data.datasets[context.datasetIndex].datalabels;
            const isLabelOutside =
              datasetLabelsSettings &&
              datasetLabelsSettings.anchor === "end" &&
              datasetLabelsSettings.align === "end";

            return (
              context.chart.isDatasetVisible(context.datasetIndex) &&
              report.chartSettings.showDataLabels &&
              ((isLabelOutside &&
                context.dataset.data[context.dataIndex] > 0) ||
                context.dataset.data[context.dataIndex] >
                  axisMax * HIDE_DATALABELS_Y_LEVEL) &&
              context.dataset.type !== "line"
            );
          },
          formatter: (x) => {
            return (x || 0).round(0);
          },
        },
      },
      legend: {
        display: true,
        onClick: function (event, legendItem) {
          var index = legendItem.datasetIndex,
            meta = null;
          var tag = chart.data.datasets[index].tag;
          var meta = chart.getDatasetMeta(index);

          if (tag || isNumeric(tag)) {
            chart.data.datasets
              .filter((x) => x.tag == tag)
              .forEach((item) => {
                item.hidden = item.forcedHidden || !item.hidden;
              });
          } else {
            meta.hidden = meta.hidden === null ? !meta.hidden : null;
          }
          chart.update();
        },
         position: "top",
        labels: {
          usePointStyle: true,
          filter: function (legendItem, chartData) {
            return (
              chartData.datasets[legendItem.datasetIndex].displayInLegend ||
              chartData.datasets[legendItem.datasetIndex].displayInLegend ==
                undefined
            );
            return false;
          },
        },
      },
      cales: {
        xAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: "Период",
            },
          },
        ],
        yAxes: [
          {
            id: "L",
            type: "linear",
            position: "left",
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: "Трудозатраты, чел-мес",
            },
          },
        ],
      },
      lines: [
          5553, 5454, 5399, 5290, 5260, 4927, 4565, 4649, 5324, 5624, 5710, 5766,
          5827, 5829, 5831, 5832, 5833, 5835, 5835, 5836, 5836, 5836, 5837, 583,
        ].map((x, i) => {
          return {
            datasetIndex: 0,
            dataIndex: i,
            yCoordinate: x,
            color: "salmon",
            width: 3,
          };
        
      }),
       data: {
        labels: [
          "2022-01",
          "2022-02",
          "2022-03",
          "2022-04",
          "2022-05",
          "2022-06",
          "2022-07",
          "2022-08",
          "2022-09",
          "2022-10",
          "2022-11",
          "2022-12",
          "2023-01",
          "2023-02",
          "2023-03",
          "2023-04",
          "2024-05",
          "2023-06",
          "2023-07",
          "2023-08",
          "2023-09",
          "2023-10",
          "2023-11",
          "2023-12",
        ],
        datasets: [
          {
            label: "ОПИ (ресурсный профиль)",
            findId: "ОПИ",
            tag: "ОПИ",
            type: "bar",
            borderWidth: 1,
            stack: "cnt",
            groupType: "cnt",
            backgroundColor: "#2196f3",
            fill: false,
            pointStyle: "rect",
            detailMode: "point",
            data: [
              5356, 5802, 6105, 6258, 6524, 6690, 6697, 7348, 6578, 5742, 4626,
              3678, 4809, 6038, 5891, 4526, 3637, 3601, 3471, 3618, 3548, 3428,
              3330, 3448, 5031,
            ],
            displayInLegend: false,
            datalabels: {
              anchor: "end",
              align: "end",
              offset: 0,
              color: function (context) {
                return "#2196f3";
              },
            },
          },
        ],
        
      },
    };
    const сhart = new Chart(ctx, options);


  </script>
</html>

Answer 1

Не уверен, что у Вас находит файлы если вы используете скачанные убедитесь что они там есть. Лично я просто добавил cdn на страницу (убрав прочие импорты) и график отобразился.

В этом и подобных случаях всегда полезно смотреть какая ошибка в консоли

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

БЛОГ НА HUSL

Как отобразить данные data chartjs?

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