如何设置 Amcharts 4 滚动条颜色？

Question

我正在尝试在 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.

感谢您的帮助。

Answer 1

滚动条有一个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");

您可以为所有组件创建不同的状态，为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");

我创建了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 是一个显示主题示例的代码笔。