如何添加amCharts的自定義導出圖標

Question

我想在amCharts中使用不同的導出圖標來下載圖表。 根據文檔我添加了圖標字段並提到了圖像文件的路徑。

但它仍然呈現爲默認值。

如何更改導出圖標？

Answer 1

導出圖標的外觀在export.css中設置，與Export插件捆綁在一起。

如果要更改圖標，您需要修改export.css文件或創建一個新的圖標，或者在自己的CSS中添加一個覆蓋。

負責該圖標的線路是這些：

.amcharts-export-menu .export-main > a, .amcharts-export-menu .export-drawing > a, .amcharts-export-menu .export-delayed-capturing > a { 
    display: block; 
    overflow: hidden; 
    text-indent: -13333337px; 
    width: 36px; 
    height: 36px; 
    padding: 0; 
    background-repeat: no-repeat; 
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2211px%22%20height%3D%2214px%22%3E%3Cpath%20d%3D%22M3%2C0%20L8%2C0%20L8%2C5%20L11%2C5%20L5.5%2C10%20L0%2C5%20L3%2C5%20L03%2C0%22%20fill%3D%22%23888%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20fill%3D%22%23888%22%20width%3D%2211%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E'); 
    background-color: #fff; 
    background-position: center; 
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); 
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5); 
    border-radius: 18px; 
    margin: 8px 8px 0 10px; 
} 

.amcharts-export-menu .export-main:hover > a { 
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2211px%22%20height%3D%2214px%22%3E%3Cpath%20d%3D%22M3%2C0%20L8%2C0%20L8%2C5%20L11%2C5%20L5.5%2C10%20L0%2C5%20L3%2C5%20L03%2C0%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20fill%3D%22%23fff%22%20width%3D%2211%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E'); 
} 

您可以將background-image部分更改爲指向靜態圖像，或其他圖像數據的URL。

重寫時，您不需要指定所有上面的設置，只是背景圖像部分：

.amcharts-export-menu .export-main > a { 
    background-image: url(myIcon.png)!important; 
} 

.amcharts-export-menu .export-main:hover > a { 
    background-image: url(myIconHover.png)!important; 
}