Question

我想在amCharts中使用不同的导出图标来下载图表。根据文档，我添加了图标字段并提到了图像文件的路径。

但它仍然被渲染为默认值。

如何更改导出图标？

Answer 1

导出图标的外观在与Export插件捆绑在一起的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部分更改为指向静态图像或其他图像的数据网址。

覆盖时，您不需要指定所有上述设置，只需指定背景图像部分：

.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;
}

如何添加amCharts的自定义导出图标

1 个答案: