Question

我之前使用了jris文件中的Morris条形图和jvector地图的样式做得很好，但无法解决如何重复相同的样式区域图表。我命名了颜色并在css中指定了笔触颜色，但是我不能改变笔画下面的圆圈和区域的颜色...... 我不知道如何处理它们（路径或其他东西）???

JSFiddle

html

<div id="dashboard-bar-1"></div>

<div id="dashboard-area-1"></div>

的javascript

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: ['#000001', '#000002'],
fillOpacity: 0.6,
gridTextSize: '10px',
hideHover: true,
resize: true,
gridLineColor: '#E5E5E5'
});

 Morris.Area({
      element: 'dashboard-area-1',
      data: [
        { y: '2014-10-10', a: 2,b: 14},
        { y: '2014-11-11', a: 4,b: 16},
        { y: '2014-12-12', a: 6,b: 10},
        { y: '2015-05-12', a: 6,b: 10},
        { y: '2015-10-04', a: 32,b: 40},
        { y: '2015-12-13', a: 27,b: 10},
        { y: '2015-01-15', a: 15,b: 7},
        { y: '2015-02-17', a: 6,b: 9},
        { y: '2015-03-16', a: 9,b: 12},
        { y: '2015-04-18', a: 18,b: 20}
      ],
      xkey: 'y',
      ykeys: ['a','b'],
      labels: ['Sales','Event'],
      resize: true,
      hideHover: true,
      xLabels: 'day',
      gridTextSize: '10px',
      lineColors: ['#000001','#000002'],
      fillOpacity: 0.3,
      gridLineColor: '#E5E5E5'
    });

CSS

#dashboard-bar-1 rect[fill="#000001"] {
    fill: red;
}

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


/*Morris area chart*/
#dashboard-area-1 path[stroke="#000001"] {
    stroke: #b64645;
}

#dashboard-area-1 path[stroke="#000002"] {
    stroke: #7d9748;

}

我需要用外部CSS设置svg区域图？

0 个答案: