reactjs - 如何设置 Amcharts 4 滚动条颜色?
问题描述
我正在尝试在 Amcharts 中设置滚动条颜色,但在 Amcharts 网站上指定的选项均无效。
我在反应应用程序中使用“@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.
谢谢您的帮助。
解决方案
滚动条有一个背景、一个拇指、一个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");
您可以为所有组件创建不同的状态,以便为hover
或press
( down
) 设置不同的颜色。
chart.scrollbarX.thumb.background.states.getKey('hover').properties.fill = am4core.color("#017acd");
chart.scrollbarX.thumb.background.states.getKey('down').properties.fill = am4core.color("#017acd");
我创建了这个代码笔来向您展示一个完整的示例。
如果您不想为单个滚动条设置样式,而是为应用程序中的所有滚动条设置样式,我建议您为此创建一个自定义主题。
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);
这是一个显示主题示例的代码笔。
推荐阅读
- javascript - 如何添加对播放列表的支持?
- flutter-web - Flutter Web如何在本地读写图片文件?
- java - Java 检查计算器程序
- reactjs - 使用 React Link 并传递状态时页面不会刷新
- django - Django QuerySets 有多懒惰?
- r - Quanteda:如何选择和检查 FCM 中的特定功能?
- excel - WorksheetFunction.Filter 中的数据类型错误
- python - 将第二个副本中的值移动到第一个副本
- google-forms - 将 Google 表单限制为 2 种类型的电子邮件
- reactjs - 在 SSR 上反应水合