amCharts 中的序列图显示不同的行为
Serial Chart in amCharts showing different beahaviour
我正在为我的应用程序使用 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);
在我的带有图表光标的系列图表中,它在以前的版本中工作正常,如下所示。见图:
更新版本后出现奇怪的行为:ChartCursor 消失了,拖动光标时它在图表上画线。
我已经在 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 但是,这里它工作正常,我花了这段时间弄清楚为什么它对我不起作用;结果:none。
这样做很简单
1)检查你的库链接和插件代码,可能会干扰其他js或插件。
2) 同时使用实时 amchart 库测试您的代码。
3) 如果一切正常且工作正常,则将 canvas 标签的 Z-index 设置为 -1。
我正在为我的应用程序使用 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);
在我的带有图表光标的系列图表中,它在以前的版本中工作正常,如下所示。见图:
更新版本后出现奇怪的行为:ChartCursor 消失了,拖动光标时它在图表上画线。
我已经在 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 但是,这里它工作正常,我花了这段时间弄清楚为什么它对我不起作用;结果:none。
这样做很简单
1)检查你的库链接和插件代码,可能会干扰其他js或插件。
2) 同时使用实时 amchart 库测试您的代码。
3) 如果一切正常且工作正常,则将 canvas 标签的 Z-index 设置为 -1。