Как я могу сделать AMchart 4 с горизонтальной прокруткой, не показывая полосы прокрутки - PullRequest
Новая
       6

Как я могу сделать AMchart 4 с горизонтальной прокруткой, не показывая полосы прокрутки

0 голосов
/ 11 февраля 2019

Я работаю над приложением «только для мобильных экранов» и использую AMCharts 4 в Angular 5. Я испробовал множество различных приемов и решений, чтобы сделать линейную диаграмму с горизонтальной прокруткой, отображая только часть данных, приведенных одновременно, безчтобы отобразить полосу прокрутки безрезультатно.

Ниже приведен мой код для создания диаграммы: 

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;

1 Ответ

0 голосов
/ 12 февраля 2019

Код имеет много проблем.Вот исправленный рабочий пример, когда диаграмма будет прокручиваться, если вы сделаете это с помощью касания: 

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;
...