javascript - 图表的外部样式

Question

是否可以将 js 文件中指定的条形颜色转换(分离)为单独的 css 样式表。如何为该值分配类？

/* Bar dashboard chart */
Morris.Bar({
element: 'dashboard-bar-1',
data: [
{ y: 'Oct 10', a: 100, b: 35 },
{ y: 'Oct 11', a: 34, b: 156 },
{ y: 'Oct 12', a: 78, b: 39 },
{ y: 'Oct 13', a: 200, b: 70 },
{ y: 'Oct 14', a: 106, b: 79 },
{ y: 'Oct 15', a: 120, b: 80 },
{ y: 'Oct 16', a: 126, b: 41 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Unique', 'Returned'],
barColors: ['#588007', '#b64645'],
fillOpacity: 0.6,
gridTextSize: '10px',
hideHover: true,
resize: true,
gridLineColor: '#E5E5E5'
});
/* END Bar dashboard chart */

/* Donut dashboard chart */
    Morris.Donut({
        element: 'dashboard-donut-1',
        data: [
            {label: "Returned", value: 1513},
            {label: "New", value: 764},
            {label: "Unique", value: 300},
            {label: "Registered", value: 1311},
            {label: "Guests", value: 250}
        ],
        colors: ['#588007', '#fea223', '#435F0A', '#b64645', '#FFF'],
        resize: true
    });
    /* END Donut dashboard chart */

Answer 1

Morris 不支持在栏上设置自定义类 ( this has been open as a pull request since 2014 )。

如果您必须通过 CSS 设置栏样式， one option的方法是将条形设置为占位符颜色，匹配填充属性，并使用外部样式覆盖填充属性(黑客警告!:D)。

// script.js
Morris.Bar({
  element: 'dashboard-bar-1',
  barColors: ['#000001', '#000002'],
  ...
});

// style.css
#dashboard-bar-1 rect[fill="#000001"] {
    fill: green;
}

#dashboard-bar-1 rect[fill="#000002"] {
    fill: blue;
}

Donut has a similar workaround.