![](/img/trans.png)
[英]Externally styling charts and maps in separate stylesheet detached from javascript
[英]Styling of charts externally
是否有可能翻譯(分離)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 */
莫里斯(Morris)不支持在欄上設置自定義類( 自2014年以來,它作為拉取請求已公開 )。
如果必須通過css設置條的樣式,則一種方法是將條設置為占位符顏色,在fill屬性上匹配,然后用外部樣式覆蓋fill屬性(hack警告!: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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.