Как установить цвет полосы прокрутки Amcharts 4? - PullRequest
Новая
       21

Как установить цвет полосы прокрутки Amcharts 4?

3 голосов
/ 15 марта 2019

Я пытаюсь установить цвет полосы прокрутки в 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.

Спасибо за помощь.

1 Ответ

2 голосов
/ 15 марта 2019

Полоса прокрутки имеет фон , большой палец , 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);

Здесь - это кодовое перо, показывающее пример темы.

...