Линейчатая диаграмма ChartJS — изменение легенды

Я новичок в ChartJS и пытаюсь построить гистограмму. Этот график должен содержать следующую информацию:

labels = ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10']

data = [1,2,3,4,5,6,7,8,9,10]

backgroundColor = ['red','red','red','blue','blue','blue','green','green','black','black']

До этого момента мне удавалось построить график так, как я ожидал. Но я хотел бы показать легенду примерно так:

И это не уникальная запись, которую я получаю:

Как я мог это сделать?

Вот что мне удалось сделать:

<div class = "ontainer">
    <canvas id = "myChart"></canvas>
</div>

<script>
    const ctx = document.getElementById('myChart');
    const label_legend = ['A','B','C','D']

    const data = {
      labels: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10'],
      datasets: [{
        label: 'My First Dataset',
        data: [1,2,3,4,5,6,7,8,9,10],
        backgroundColor: ['red','red','red','blue','blue','blue','green','green','black','black'],
      }]
    };
        
    const config = {
      type: 'bar',
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      },
    };
    new Chart(document.getElementById('myChart'), config);
</script>

javascript graph chart.js bar-chart legend-properties

30.08.2024 15:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Не следует объединять данные из разных категорий в одну категорию.

Набор данных должен быть в этом формате:

[
  {
    label: 'Red',
    data: [1, 2, 3, null, null, null, null, null, null, null],
    backgroundColor: 'red',
  },
  {
    label: 'Blue',
    data: [null, null, null, 4, 5, 6, null, null, null, null],
    backgroundColor: 'blue',
  },
  {
    label: 'Green',
    data: [null, null, null, null, null, null, 7, 8, null, null],
    backgroundColor: 'green',
  },
  {
    label: 'Black',
    data: [null, null, null, null, null, null, null, null, 9, 10],
    backgroundColor: 'black',
  },
]

Преобразуйте входные данные в формат с помощью:

const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const inputColors = [
  'red',
  'red',
  'red',
  'blue',
  'blue',
  'blue',
  'green',
  'green',
  'black',
  'black',
];

const colors = new Set(inputColors);
let groupedDataset = [];
for (let color of colors) {
  groupedDataset.push({
    label: color.charAt(0).toUpperCase() + color.slice(1),
    data: inputs.map((x, i) => (inputColors[i] === color ? x : null)),
    backgroundColor: color,
  });
}

const data = {
  labels: ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10'],
  datasets: groupedDataset,
};

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
    skipNull: true,
  },
};

Если данные не относятся к категории, укажите значение с помощью null.

Чтобы предотвратить отображение нерелевантной панели в столбце (например, полоса с синим, зеленым и черным цветом не должна отображаться в D1, D2 и D3), настройте skipNull: true в options.

Демо @ StackBlitz

Большое спасибо за понятное объяснение.

— 30.08.2024 17:33

30.08.2024 16:24