自定义 Amcharts 滚动条

Question

我正在使用 Amchart 和 Angular 6 创建月费图表，但滚动条部分遇到问题

这是我的启动代码（部分被截断）

am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
const chart = am4core.create("chartdiv", am4charts.XYChart);
chart.responsive.enabled = true;
// Add data
chart.data = [
  ... data
];
chart.padding(0, 30, 0, 0);
chart.margin(0, 0, 0, 0);
// Create axes
const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.startLocation = 0;
dateAxis.endLocation = 0;
dateAxis.renderer.grid.template.fill = am4core.color("yellow");
dateAxis.renderer.labels.template.fill = am4core.color("#ffffff");

// dateAxis.renderer.labels.template.rotation = 90; // rotate the label in case we need it
//
dateAxis.renderer.minGridDistance = 50;
// dateAxis.renderer.grid.template.location = 0;

// Create value axis
const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
const series = chart.series.push(new am4charts.LineSeries());
// let series = chart.series.push(new am4charts.CurvedColumnSeries());
//...
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.height = 5;
chart.scrollbarX.background.fill = am4core.color("#FCFCFC");
chart.scrollbarX.background.fill = am4core.color("#FCFCFC");
chart.scrollbarX.fillOpacity = 1;
chart.scrollbarX.stroke = am4core.color("rgba(0,0,0,.5)");
chart.scrollbarX.strokeWidth = 1;
chart.scrollbarX.margin(30, 30, 30, 30);
chart.scrollbarX.thumb.minWidth = 50;  }

我需要自定义滚动条，因为它占用了很多空间，并且还能够自定义左右箭头。

Answer 1

我用过-categoryAxis.end = 0.2;

categoryAxis.start = 0.8;

检查