Styling of charts externally

问题

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

回答1:

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

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 has a similar workaround.

来源：https://stackoverflow.com/questions/31232371/styling-of-charts-externally

标签

javascript

charts