amCharts中的序列图表显示了不同的行为

时间:2016-06-06 09:33:35

标签: javascript amcharts

我正在使用amCharts作为我的应用。最近我将其从版本3.17.0更新为3.20.6

在我的应用程序中,我使用导出capture方法捕获图像,如下所示:

if (window.fabric) {
                    clearTimeout(interval);

                    // CAPTURE CHART
                    chart.export.capture({}, function() {

                        // SAVE TO JPG
                        this.toPNG({}, function(base64) {

                            //some code
                                                    });
                    });
                }
 }, 10); 

在我的带有图表光标的序列图中,它在以前的版本中工作得很好。见图片:amChart version 3.17.0

更新版本后,它显示出奇怪的行为:ChartCursor消失了,在拖动光标时,它是Chart上的绘图线。 amChart version 3.20.6

我已经检查过amChart网站,我已经正确设置了所有内容。

这里有什么不妥?

如果我将禁用chart.export.capture,它会'会工作正常。
这是我设置属性图表的代码:

"type": "serial",
                "theme": "none",
                "pathToImages": "resources/javascript/amcharts/images/",
                "marginTop": 1,
                "marginBottom": 1,
                "autoMarginOffset": offsetM,
                //left hand side space between container and chart
                "zoomOutButtonRollOverAlpha": 0.15,

                "zoomControl": {
                    "zoomControlEnabled": true,
                    "backgroundAlpha": "0.15",
                    "backgroundColor": "#000000"
                },

                "dataProvider": valueChartData,
                "columnWidth": 1,
                "categoryField": "date",
                "categoryAxis": {
                    "minPeriod": "DD",
                    "parseDates": true
                },

                "export": {
                    "enabled": false,
                    "menu": []
                }

用于导出和克隆图表:

var interval = setInterval(function() {
                    if (window.fabric) {
                        clearTimeout(interval);

                        // CAPTURE CHART
                        main.pageContainerBulkMarketing.bulkmarketing.pageContainerBMReports.reports.chart["export"].capture({}, function() {

                            // SAVE TO JPG
                            this.toPNG({}, function(base64) {

                                somewhere.OpenedTabGrpClone = "";
                                somewhere.OpenedTabGrpClone = base64;
                            });
                        });
                    }
                }, 10);

注意:我观察过一件事:它在我们的图表div上添加了一个canvas标签,它就像:

<canvas class="upper-canvas " style="position: absolute; width: 802px; height: 360px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="802" height="360"></canvas>

更新:我在这里添加了jsfiddle但是,这里工作正常,我花了这么多时间弄清楚它为什么不能在我身边工作;结果:没有。

1 个答案:

答案 0 :(得分:1)

简单做到这一点

1)检查您的图书馆链接和插件代码,可能会干扰其他js或插件。

2)还要使用实时amchart库测试您的代码。

3)如果每件事情都很好并且正在为画布标签设置Z-index为-1。