在与 javascript 分离的单独样式表中对图表和地图进行外部样式设置

Question

我有一些人力车图表和 Jvector 地图需要在单独的 css 样式表中进行外部样式设置以更改图表的颜色。如果在我的 html 中看不到 svg，我该如何访问已在 js 文件中指定的样式。

/* Rickshaw dashboard chart */
    var seriesData = [ [], [] ];
    var random = new Rickshaw.Fixtures.RandomData(1000);

    for(var i = 0; i < 100; i++) {
        random.addData(seriesData);
    }

    var rdc = new Rickshaw.Graph( {
            element: document.getElementById("dashboard-chart"),
            renderer: 'area',
            width: $("#dashboard-chart").width(),
            height: 250,
            series: [{color: "#B4D278",data: seriesData[0],name: 'New'}, 
                     {color: "#588007",data: seriesData[1],name: 'Returned'}]
    } );

    rdc.render();

    var legend = new Rickshaw.Graph.Legend({graph: rdc, element: document.getElementById('dashboard-legend')});
    var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({graph: rdc,legend: legend});
    var order = new Rickshaw.Graph.Behavior.Series.Order({graph: rdc,legend: legend});
    var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {graph: rdc,legend: legend} );        

    var rdc_resize = function() {                
            rdc.configure({
                    width: $("#dashboard-chart").width(),
                    height: $("#dashboard-chart").height()
            });
            rdc.render();
    }

    var hoverDetail = new Rickshaw.Graph.HoverDetail({graph: rdc});

    window.addEventListener('resize', rdc_resize);        

    rdc_resize();
    /* END Rickshaw dashboard chart */


/* Vector Map */
    var jvm_wm = new jvm.WorldMap({container: $('#dashboard-map-seles'),
                                    map: 'us_aea_en', 
                                    backgroundColor: '#FFFFFF',                                      
                                    regionsSelectable: true,
                                    regionStyle: {selected: {fill: '#589a35'},
                                                    initial: {fill: '#588007'}},
                                    markerStyle: {initial: {fill: '#435F0A',
                                                   stroke: '#435F0A'}},
                                    markers: [{latLng: [50.27, 30.31], name: 'Kyiv - 1'},                                              
                                              {latLng: [52.52, 13.40], name: 'Berlin - 2'},
                                              {latLng: [48.85, 2.35], name: 'Paris - 1'},                                            
                                              {latLng: [51.51, -0.13], name: 'London - 3'},                                                                                                      
                                              {latLng: [40.71, -74.00], name: 'New York - 5'},
                                              {latLng: [35.38, 139.69], name: 'Tokyo - 12'},
                                              {latLng: [37.78, -122.41], name: 'San Francisco - 8'},
                                              {latLng: [28.61, 77.20], name: 'New Delhi - 4'},
                                              {latLng: [41.88, -87.63], name: 'Chicago - 6'},
                                              {latLng: [32.77, -96.79], name: 'Dallas - 1'},
                                              {latLng: [50.85, 4.35], name: 'Brussels'},
                                              {latLng: [39.91, 116.39], name: 'Beijing - 3'}]
                                });    
    /* END Vector Map */


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

Rickshaw 有系列 className 选项。

// script.js
// ...
var rdc = new Rickshaw.Graph( {
        element: document.getElementById("dashboard-chart"),
        renderer: 'area',
        width: $("#dashboard-chart").width(),
        height: 250,
        series: [
          {className:'new',data: seriesData[0],name: 'New'}, 
          {className: "rendered",data: seriesData[1],name: 'Returned'}
        ]
} );
// ...

// style.css
.new {
    fill: #B4D278;
}

.rendered {
    fill: #588007;
}

查看这个 JSFiddle：https://jsfiddle.net/m36xguw7/1/。

在与 javascript 分离的单独样式表中对图表和地图进行外部样式设置

Externally styling charts and maps in separate stylesheet detached from javascript

javascript

graph

charts

data-visualization

rickshaw