如何在不显示滚动条的情况下使 AMchart 4 水平滚动

Question

我正在开发仅限移动屏幕的应用程序，并在 Angular 5 中使用 AMCharts 4。我尝试了许多不同的技巧和解决方案，使折线图可水平滚动，同时仅显示给定的一部分数据在任何时候无需显示滚动条都无济于事。

下面是我生成图表的代码：

this.data = [{
  id: 156
  tran_amount: "125.0"
  value_date: "2019-02-05T12:00:46.173"
}, {
  tran_amount: "12345.0"
  value_date: "2019-01-05T12:00:46.173"
}];

let chart = am4core.create("amchart-container", am4charts.XYChart);
chart.data = [];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.dataFields.date = "value_date";
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.zoom({start: 0.8, end: 1, priority: 'end'});
valueAxis.renderer.labels.template.disabled = true;

// valueAxis.title.text = "Account Balance";
// valueAxis.renderer.labels.template.adapter.add("text", function(text, target) {
//   return "" ;
// });
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
// chart.cursor.element.addStyle({})
chart.cursor.behavior = 'panX';
// chart.cursor.disabled = true;
// chart.cursor.marginLeft = 0;
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.height = new am4core.Percent(0);
chart.scrollbarX.width = new am4core.Percent(10);
// chart.scrollbarX.disabled = true;
chart.zoomOutButton.disabled = true;
chart.swipeable = true;
chart.events.on('ready', () => {
  // setTimeout(() => valueAxis.zoom({start: 0, end: 0.2, priority: 'start'}), 300);
  chart.maxZoomFactor = 32;
  chart.zoomToIndexes(this.data.length - 1 < 0 ? 0 : this.data.length - 1, this.data.length);

  console.log('ready');

})'
this.chart.data = this.data;

Answer 1

代码有很多问题。这是一个经过清理的工作示例，如果您通过触摸执行此操作，图表将滚动：

let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
  tran_amount: 125.0,
  value_date: new Date("2019-01-05T12:00:00.000")
}, {
  tran_amount: 12345.0,
  value_date: new Date("2019-02-05T12:00:00.000")
}, {
  tran_amount: 12345.0,
  value_date: new Date("2019-03-05T12:00:00.000")
}];
let categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.start = 0.7;
categoryAxis.keepSelection = true;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueY = "tran_amount";
lineSeries.dataFields.dateX = "value_date";
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = 'panX';
chart.scrollbarX = new am4core.Scrollbar();
chart.zoomOutButton.disabled = true;
chart.swipeable = true;

如何在不显示滚动条的情况下使 AMchart 4 水平滚动

How can I make AMchart 4 horizontally scrollable without showing scrollbars

amcharts