javascript - 如何将 CSS 添加到嵌套的 JavaScript 对象？

Question

我有一个带有嵌套对象的 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>

chart.js API 带有自己的自定义样式选项，例如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;

无济于事。在定义 src 时插入变量borderColor似乎可以工作img，但这样做不符合这里的目标。内联样式似乎也不起作用（除非在 chart.js 中预定义）。

如何将 CSS 添加到嵌套对象属性？否则，chart.js 发光边框的任何替代方案？

标签： javascriptcsschartschart.jsjavascript-objects