外部样式 [英] Styling of charts externally

问题描述

可以将js文件中声明的bar颜色翻译（分离）为单独的css样式表。如何将类分配给此值？

Is it possible to translate(detach) bar colors stated in js file to separate css stylesheet. How to assign classes to this values?

/* 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 */

推荐答案

Morris不支持在酒吧上设置自定义类（此操作已作为拉式请求打开），因为2014 ）。

Morris doesn't support setting custom classes on bars (this has been open as a pull request since 2014).

如果您必须通过css为栏设置样式，一个选项是将条形设置为占位符颜色，匹配填充属性，并用外部样式覆盖填充属性（hack warning！：D）。

If you must style the bars via css, one option is to set the bars to placeholder colors, match on the fill attribute, and override the fill attribute with external styles (hack warning! :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也有类似的解决方法。

这篇关于外部样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！