Question

我正在使用仅限移动屏幕的应用程序，并在Angular 5中使用了AMCharts4。我尝试了许多不同的技巧和解决方案，以使折线图可水平滚动，同时只显示一次提供的部分数据，而无需显示滚动条无济于事。

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

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

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

wedges, texts = ax.pie(reordered, colors=colors, labels=labels, shadow=True, labeldistance=1.05)

for pie_wedge in wedges:
    pie_wedge.set_edgecolor('white')

plt.legend(wedges, labels, loc="best")

如何使AMchart 4水平滚动而不显示滚动条

1 个答案: