У меня есть гистограмма chart.js с вложенным объектом var config
:
var color = Chart.helpers.color;
var config = {
type: 'bar',
data: {
labels: ['8AM','9AM',\*…*\ '11PM','12AM'],
datasets: [{
label: 'Dataset 1',
backgroundColor: color(window.chartColors.blue).alpha(0.75).rgbString(),
borderColor: window.chartColors.blue,
data: [0, 0, 0, \* … *\ 0]
}] }
options: {title: {text: 'Chart.js Combo Time Scale'},
scales: {xAxes: [{ticks: {source: 'data'}, stacked: true, display: true}],
yAxes: [{ticks: {min:0, max:60}, stacked: true}] }}}
<canvas id="canvas"></canvas>
API chart.js поставляется с собственными параметрами стиля, такими как backgroundColor
, ноне хватает;Я пытаюсь добавить следующий CSS к datasets
, свойству, отвечающему за бары диаграммы:
.glowing-border {border: 2px solid #dadada; border-radius: 7px;}
.glowing-border:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;}
Цель - украсить бары диаграммы светящейся границей.Я попытался определить пустое изображение с добавленным CSS, а затем вызвал переменную хранения в borderColor следующим образом:
var img = new Image();
img.classList.add = 'glowing-border';
var ctx = document.getElementById('canvas').getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
// ...
label: 'Dataset 1',
borderColor: fillPattern;
безрезультатно.Вставка переменной в borderColor
, кажется, работает, когда определено img
src, но это не соответствует поставленным целям.Похоже, что встроенное моделирование также не работает (если только это не предопределено в chart.js).
Как добавить CSS в свойства вложенных объектов?Иначе, есть ли альтернативы светящимся границам с chart.js?