我正在尝试在 Amcharts 中设置滚动条颜色,但 Amcharts 网站上指定的选项均不起作用。
我在 React 应用程序中使用 "@amcharts/amcharts4": "^4.2.2"。
我尝试了下面提到的许多选项。它们都不起作用。
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.fill = "#017acd";
chart.scrollbarX.setFill(new am4core.color("#017acd"));
chart.scrollbarX.setStroke(new am4core.color("#017acd"));
chart.scrollbarX.stroke = "#017acd"; //this sets the border line color of
scrollbar.
感谢您的帮助。
最佳答案
滚动条有 background ,一个thumb ,一个startGrip和一个endGrip 。它们中的每一个都可以通过以下方式单独设置样式:
chart.scrollbarX.background.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.fill = am4core.color("#017acd");
chart.scrollbarX.startGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.endGrip.background.fill = am4core.color("#017acd");
chart.scrollbarX.stroke = am4core.color("#017acd");
您可以为所有组件创建不同的状态,为悬停
或按下
(向下
)设置不同的颜色。
chart.scrollbarX.thumb.background.states.getKey('hover').properties.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.states.getKey('down').properties.fill = am4core.color("#017acd");
我创建了this代码笔向您展示一个完整的示例。
如果您想设计的不是单个滚动条,而是应用程序中的所有滚动条,我建议 creating a custom theme为此。
function am4themes_myTheme(target) {
if (target instanceof am4core.InterfaceColorSet) {
target.setFor("secondaryButton", am4core.color("#6DC0D5"));
target.setFor("secondaryButtonHover", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonDown", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonActive", am4core.color("#6DC0D5").lighten(-0.2));
target.setFor("secondaryButtonText", am4core.color("#FFFFFF"));
target.setFor("secondaryButtonStroke", am4core.color("#467B88"));
}
if (target instanceof am4core.Scrollbar) {
target.stroke = am4core.color("#017acd");
}
}
am4core.useTheme(am4themes_myTheme);
Here是一个显示主题示例的代码笔。
关于reactjs - 如何设置Amcharts 4滚动条颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55180370/