Как добавить CSS во вложенный объект JavaScript? - PullRequest
0 голосов
/ 12 сентября 2018

У меня есть гистограмма 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...