Как добавить пользовательский значок экспорта amCharts

Question

Я хочу использовать другую иконку экспорта в amCharts для загрузки диаграмм. В соответствии с документацией я добавил поле значка и указанный путь к файлу изображения.

Но все же он получает отображаемый по умолчанию.

Как я могу изменить значок экспорта?

Answer 1

Внешний вид значка экспорта установлен в export.css в комплекте с Экспортным плагином.

Если вы хотите изменить значок, вам нужно будет либо изменить файл 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; 
}