chart.js не выводит столбчатый график с накоплением

Question

Нужно сделать что-то похожее

С type:'line' всё хорошо, а с type: 'bar', график пустой. Что не так?

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>

<div style="height: 50vh; width: 100%;">
    <canvas id="myChart2"></canvas>
</div>

<script>
    const data2 = {
        labels: [],
        datasets: [
            {
                label: 'Тайлы OpenStreetMap',
                borderColor: 'rgb(78, 154, 6)',
                backgroundColor: 'rgba(78, 154, 6, 0.15)',
                data: JSON.parse('[{"x": "2025-11-12", "y": 90}, {"x": "2025-10-12", "y": 544}, {"x": "2025-11-03", "y": 87}, {"x": "2025-11-19", "y": 5}, {"x": "2025-10-29", "y": 2}, {"x": "2025-11-14", "y": 76}, {"x": "2025-11-29", "y": 123}, {"x": "2025-11-25", "y": 70}, {"x": "2025-11-04", "y": 166}, {"x": "2025-11-16", "y": 210}, {"x": "2025-10-16", "y": 189}, {"x": "2025-10-28", "y": 41}, {"x": "2025-11-18", "y": 230}, {"x": "2025-11-17", "y": 193}, {"x": "2025-10-13", "y": 46}, {"x": "2025-11-20", "y": 623}, {"x": "2025-10-08", "y": 542}, {"x": "2025-12-01", "y": 5}, {"x": "2025-11-26", "y": 25}, {"x": "2025-10-23", "y": 45}, {"x": "2025-11-07", "y": 61}, {"x": "2025-11-01", "y": 18}, {"x": "2025-11-30", "y": 151}, {"x": "2025-10-06", "y": 136}, {"x": "2025-10-18", "y": 9}, {"x": "2025-10-30", "y": 160}, {"x": "2025-10-20", "y": 297}, {"x": "2025-11-28", "y": 4}, {"x": "2025-10-25", "y": 317}, {"x": "2025-11-06", "y": 46}, {"x": "2025-10-19", "y": 33}, {"x": "2025-10-10", "y": 31}, {"x": "2025-10-26", "y": 166}, {"x": "2025-11-09", "y": 44}, {"x": "2025-10-21", "y": 150}, {"x": "2025-11-21", "y": 511}, {"x": "2025-11-15", "y": 211}, {"x": "2025-10-31", "y": 115}, {"x": "2025-10-09", "y": 101}, {"x": "2025-12-04", "y": 46}, {"x": "2025-12-03", "y": 411}, {"x": "2025-10-07", "y": 70}, {"x": "2025-10-15", "y": 23}, {"x": "2025-10-05", "y": 6}, {"x": "2025-11-22", "y": 266}, {"x": "2025-11-05", "y": 88}, {"x": "2025-10-22", "y": 14}, {"x": "2025-11-10", "y": 176}, {"x": "2025-11-23", "y": 100}, {"x": "2025-11-13", "y": 70}, {"x": "2025-11-08", "y": 42}, {"x": "2025-10-17", "y": 196}, {"x": "2025-10-11", "y": 91}, {"x": "2025-10-14", "y": 94}, {"x": "2025-11-02", "y": 94}]'),
                //fill: false,
                borderWidth: 2
            },
                            {
            label: 'Тайлы Humanitarian',
                borderColor: 'rgb(204, 0, 0)',
                backgroundColor: 'rgba(204, 0, 0, 0.15)',
                data: JSON.parse('[{"x": "2025-10-12", "y": 8}, {"x": "2025-11-04", "y": 14}, {"x": "2025-11-16", "y": 8}, {"x": "2025-11-17", "y": 10}, {"x": "2025-10-30", "y": 26}, {"x": "2025-10-19", "y": 6}, {"x": "2025-10-31", "y": 9}, {"x": "2025-11-15", "y": 53}, {"x": "2025-12-03", "y": 76}, {"x": "2025-10-07", "y": 17}, {"x": "2025-11-05", "y": 22}, {"x": "2025-10-17", "y": 10}]'),
                //fill: false,
                borderWidth: 2
            },
            
            {               
                label: 'Тайлы OpenTopoMap',
                borderColor: 'rgb(233, 185, 110)',
                backgroundColor: 'rgba(233, 185, 110, 0.15)',
                data: JSON.parse('[{"x": "2025-10-12", "y": 20}, {"x": "2025-11-16", "y": 6}, {"x": "2025-10-16", "y": 39}, {"x": "2025-12-01", "y": 153}, {"x": "2025-12-02", "y": 555}, {"x": "2025-11-01", "y": 10}, {"x": "2025-10-06", "y": 26}, {"x": "2025-10-26", "y": 28}, {"x": "2025-10-07", "y": 4}, {"x": "2025-11-23", "y": 19}, {"x": "2025-11-08", "y": 2}, {"x": "2025-10-17", "y": 80}]'),
                //fill: false,
                borderWidth: 2
            },
            {
                label: 'Поиск через Nominatim',
                borderColor: /*'rgb(237, 212, 0)'*/ 'rgb(118,80,123)',
                backgroundColor: /*'rgba(237, 212, 0, 0.15)'*/ 'rgba(118,80,123,0.15)',
                data: JSON.parse('[{"x": "2025-10-22", "y": 3}, {"x": "2025-11-10", "y": 3}, {"x": "2025-12-03", "y": 5}, {"x": "2025-11-21", "y": 1}, {"x": "2025-10-31", "y": 1}, {"x": "2025-10-20", "y": 3}, {"x": "2025-10-25", "y": 11}, {"x": "2025-11-06", "y": 1}, {"x": "2025-10-06", "y": 6}, {"x": "2025-10-26", "y": 7}, {"x": "2025-12-02", "y": 1}, {"x": "2025-10-23", "y": 1}, {"x": "2025-11-07", "y": 2}, {"x": "2025-11-01", "y": 1}, {"x": "2025-10-08", "y": 12}, {"x": "2025-11-17", "y": 3}, {"x": "2025-11-20", "y": 3}, {"x": "2025-10-12", "y": 2}, {"x": "2025-11-03", "y": 1}, {"x": "2025-10-14", "y": 3}, {"x": "2025-10-17", "y": 6}, {"x": "2025-11-05", "y": 1}, {"x": "2025-10-15", "y": 1}, {"x": "2025-10-07", "y": 2}, {"x": "2025-11-15", "y": 1}, {"x": "2025-11-30", "y": 1}, {"x": "2025-10-30", "y": 1}, {"x": "2025-11-04", "y": 3}, {"x": "2025-11-18", "y": 2}, {"x": "2025-10-16", "y": 4}, {"x": "2025-10-13", "y": 3}, {"x": "2025-12-01", "y": 1}]'),
                //fill: false,
                borderWidth: 2
            },
            {
                label: 'Другие запросы',
                borderColor:  'rgb(85,87,83)',
                backgroundColor: 'rgba(85,87,83,0.15)',
                data: JSON.parse('[{"x": "2025-12-03", "y": 4}, {"x": "2025-12-02", "y": 1}]'),
                //fill: false,
                borderWidth: 2
            },

        ]
    };
    
    for (const ds of data2.datasets) {
        ds.data.sort((a, b) => new Date(a.x) - new Date(b.x));
    }


    const config2 = {
        //type:'line',
        type: 'bar',
        data: data2,
        options: { maintainAspectRatio: false ,
            scales: {
              xAxes: [{
                type: 'time'/*,
                time: {
                        displayFormats: {
                                day: 'MMM DD, YYYY'
                                // or any desired format
                            }
                        }*/
              }],
              
                                x: {
                    stacked: true
                },
                y: {
                    stacked: true
                }
            },
            animation: false
          }
    };

    const myChart2 = new Chart(
        document.getElementById('myChart2'),
        config2
    );
</script>

Answer 1

В Chart.js версии 3 и выше обработка дат не встроена, поэтому при использовании type: 'time' библиотека требует внешний date adapter.

ошибка в консоли

Uncaught Error: This method is not implemented:
Check that a complete date adapter is provided.

Поэтому я добавила адаптер:

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

Одновременно были подключены две несовместимые версии Chart.js:

Chart.js v4 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Chart.js v2.1.0 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js

Это вызывает конфликт API

Поэтому я оставила только актуальную библиотеку:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Также изменилась структура параметров scales

В Chart.js 3+ формат: scales: { xAxes: [...] } заменён на: scales: { x: { ... }, y: { ... } }

Официальная документация (Migration Guide)

вот, что получилось после исправлений

const data2 = {
  datasets: [{
    label: 'OpenStreetMap',
    backgroundColor: 'rgba(78, 154, 6, 0.5)',
    borderColor: 'rgb(78,154,6)',
    data: [{
        x: "2025-11-12",
        y: 90
      },
      {
        x: "2025-10-12",
        y: 544
      }
    ]
  }]
};

const config2 = {
  type: 'bar',
  data: data2,
  options: {
    maintainAspectRatio: false,
    scales: {
      x: {
        type: 'time',
        stacked: true
      },
      y: {
        stacked: true
      }
    }
  }
};

new Chart(document.getElementById('myChart2'), config2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

<div style="height: 50vh; width: 100%;">
  <canvas id="myChart2"></canvas>
</div>

БЛОГ НА HUSL

chart.js не выводит столбчатый график с накоплением

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