amChart chartScrollbar 在移动设备上不起作用答案

【问题标题】：amChart chartScrollbar does not work on mobile devicesamChart chartScrollbar 在移动设备上不起作用
【发布时间】：2017-10-26 14:45:57
【问题描述】：

我有一个在移动设备上运行并使用 amChart 的网络应用程序。图表本身工作正常，但 chartScrollbar 对触摸事件没有反应。两个滑块都无法移动，因此无法放大图表。

这是我的代码：

            var chartData = this._getData();

            var chart = new AmCharts.AmSerialChart();
            chart.categoryField = "date";
            chart.dataProvider = chartData;
            chart.dataDateFormat = "YYYY-MM-DD";
            chart.pathToImages = qx.util.ResourceManager.getInstance().toUri("resource/app/external libraries/");
            chart.valueAxes.title = "Nm³";
            chart.addTitle("Configured Chart 1",14,"#000000",false);

            var graphLine = new AmCharts.AmGraph();
            graphLine.valueField = "value";
            graphLine.type = "line";
            graphLine.title = "Ausstoß Biogas";
            graphLine.bullet = "round";
            graphLine.bulletBorderAlpha =  1;
            graphLine.bulletColor =  "#FFFFFF";
            graphLine.bulletSize = 5;
            graphLine.hideBulletsCount = 50;
            graphLine.lineThickness = 2;
            graphLine.useLineColorForBulletBorder = true;

            chart.addGraph(graphLine);

            var categoryAxis = new AmCharts.CategoryAxis();
            categoryAxis.parseDates = true;
            categoryAxis.dashLength = 1;
            categoryAxis.minorGridEnabled = true;

            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.title ="Nm³";
            chart.addValueAxis(valueAxis);

            var chartScrollbar = new AmCharts.ChartScrollbar();
            chartScrollbar.autoGridCount = true;
            chartScrollbar.graph = graphLine;
            chartScrollbar.scrollbarHeight = 40;
            chart.chartScrollbar = chartScrollbar;

            var legend = new AmCharts.AmLegend();
            legend.useGraphSettings = true;
            legend.align = "center";
            chart.addLegend(legend);

            chart.categoryAxis = categoryAxis;

            chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);

            this.addListenerOnce("appear", function() {
                chart.write(this.getChildControl("comp").getContentElement().getDomElement());
                this.addListener("resize", function(){
                    chart.invalidateSize()
                });
            }, this);

有没有办法解决这个问题？或者有没有其他方法可以在移动设备上使用 amChart 缩放功能？

【问题讨论】：

您使用的是最新版本吗？尝试设置 chart.panEventsEnabled = true;
是的，我刚刚升级到最新版本，但行为仍然相同：在移动设备上我无法拖动滑块。我还设置了 chart.panEventsEnabled = true;但它没有效果......
amcharts.com首页股票图表的滚动条可以拖动吗？
我尝试在 Nexus 7 平板电脑上拖动“绘制趋势线”股票图表 (amcharts.com/demos/drawing-trend-lines/Date) 的滑块，但滚动条似乎对点击或拖动事件没有反应。我还尝试了“基础数据”图表 (amcharts.com/demos/date-based-data/#theme-none)，它与我在应用程序中使用的基本相同，但结果相同......
我用 6 种不同的触摸设备测试了这些样本，一切都很好......

标签： charts amcharts

【解决方案1】：

我终于解决了这个问题。我为 zoomToIndexes() 函数添加了一个监听器：

chart.addListener("rendered", zoomChart);

function zoomChart() {
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}

现在图表已预先缩放到某些索引，我可以拖动幻灯片，但不知道为什么。这有点慢，但它有效。

【讨论】：

【解决方案2】：

使用chart.tapToActivate = false 属性使图表在移动设备上正常工作。

【讨论】：