Question

我有在移动设备上运行并使用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缩放功能？

Answer 1

我终于解决了这个问题。我为zoomToIndexes（）函数添加了一个listerner：

chart.addListener("rendered", zoomChart);

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

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

Answer 2

使用chart.tapToActivate = false属性图表可以正常使用移动设备。

amChart chartScrollbar不适用于移动设备

2 个答案: