Могу ли я установить цвет фона диаграммы Chart.js на основе элемента набора данных? ⇐ Javascript
-
Гость
Могу ли я установить цвет фона диаграммы Chart.js на основе элемента набора данных?
Я знаю, что в Chart.js вы можете передать массив цветов в параметр backgroundColor, но можно ли использовать текущий элемент dataset для выбрать цвет? В идеале я бы хотел сделать что-то вроде:
new Chart(ctx, { тип: «пирог», данные: { наборы данных: [{ данные: баллы, BackgroundColor: (контекст) => { // Это ключевой бит. Могу ли я как-то получить доступ к текущему // элемент набора данных здесь из контекста? вернуть context.item.color } }] } }) Ниже приведен рабочий пример, где backgroundColor — это массив, но я бы хотел изменить его, чтобы использовать функцию обратного вызова, которая устанавливает фон на основе текущего элемента набора данных:
const ctx = document.getElementById('chart') константный набор данных = [ { имя: «Джон», оценка: 10, цвет: «оранжевый» }, { имя: «Боб», оценка: 5, цвет: «желтый», }, { имя: «Алиса», балл: 20, цвет: «розовый» } ] константные оценки = dataSet.map(data => data.score) новая диаграмма(ctx, { тип: «пирог», данные: { наборы данных: [{ данные: баллы, BackgroundColor: ['red', 'green', 'blue'] // Есть ли способ выбрать цвет на основе элемента набора данных. В идеале я хотел бы получить доступ к элементу массива из dataSet и прочитать оттуда свойство color. }] } })
Я знаю, что в Chart.js вы можете передать массив цветов в параметр backgroundColor, но можно ли использовать текущий элемент dataset для выбрать цвет? В идеале я бы хотел сделать что-то вроде:
new Chart(ctx, { тип: «пирог», данные: { наборы данных: [{ данные: баллы, BackgroundColor: (контекст) => { // Это ключевой бит. Могу ли я как-то получить доступ к текущему // элемент набора данных здесь из контекста? вернуть context.item.color } }] } }) Ниже приведен рабочий пример, где backgroundColor — это массив, но я бы хотел изменить его, чтобы использовать функцию обратного вызова, которая устанавливает фон на основе текущего элемента набора данных:
const ctx = document.getElementById('chart') константный набор данных = [ { имя: «Джон», оценка: 10, цвет: «оранжевый» }, { имя: «Боб», оценка: 5, цвет: «желтый», }, { имя: «Алиса», балл: 20, цвет: «розовый» } ] константные оценки = dataSet.map(data => data.score) новая диаграмма(ctx, { тип: «пирог», данные: { наборы данных: [{ данные: баллы, BackgroundColor: ['red', 'green', 'blue'] // Есть ли способ выбрать цвет на основе элемента набора данных. В идеале я хотел бы получить доступ к элементу массива из dataSet и прочитать оттуда свойство color. }] } })
Мобильная версия