在多个基于日期的序列图表之间同步缩放和光标
Syncing zoom and cursor across several date-based serial charts
我正在尝试按照此处的示例在多个折线图上实现光标和缩放的同步。
http://codepen.io/amcharts/pen/64dc766ec283e086c8ac8a5fba3bed83
我看到示例如下所示
var charts = [];
charts.push(AmCharts.makeChart("chartdiv", chartConfig));
charts.push(AmCharts.makeChart("chartdiv2", chartConfig2));
charts.push(AmCharts.makeChart("chartdiv3", chartConfig3));
此后,
for (var x in charts) {
charts[x].addListener("zoomed", syncZoom);
charts[x].addListener("init", addCursorListeners);
}
侦听器的代码也在 for 循环中迭代。
问题
以下是我在PHP文件中用来检索SQL结果然后绘制amchart的逻辑
。for ( i = 1 to 10){
resultset[i] = exec_db_query(param1,param2...)
<script>
drawAmChart(resultset[i],val2,val3 etc)
</script>
}
drawAmChart(resultset[i],val2,val3 etc)
调用接收图表作为参数的 javscript 函数addListeners
。
作为绘制图表的一部分,我在绘制图表时向其添加侦听器。因此,我从示例中为下面的代码
for (var x in charts) {
charts[x].addListener("zoomed", syncZoom);
charts[x].addListener("init", addCursorListeners);
}
是
function addListeners(chartObj) {
// chartObj.addListener("init", handleInit);
chartObj.addListener('init', function () {
function legendHandler(evt) {
if (evt.dataItem.id === 'all') {
for (var i1 in evt.chart.graphs) {
if (evt.chart.graphs[i1].id !== 'all') {
evt.chart[evt.dataItem.hidden ? 'hideGraph' : 'showGraph'](evt.chart.graphs[i1]);
}
}
}
}
function syncZoom(evt) {
if (chartObj.ignoreZoom) {
chartObj.ignoreZoom = false;
}
if (evt.chart !== chartObj) {
evt.chart.ignoreZoom = true;
evt.chart.zoomToDates(evt.startDate, evt.endDate);
}
}
function handleHideCursor(event) {
if (event.chart.chartCursor.hideCursor) {
event.chart.chartCursor.forceShow = false;
event.chart.chartCursor.hideCursor(false);
}
}
function addCursorListeners(event) {
event.chart.chartCursor.addListener("changed", function () {
function handleCursorChange(event) {
if (event.chart !== chartObj) {
if (event.position) {
chartObj.chartCursor.isZooming(event.target.zooming);
chartObj.chartCursor.selectionPosX = event.target.selectionPosX;
chartObj.chartCursor.forceShow = true;
chartObj.chartCursor.setPosition(event.position, false, event.target.index);
}
}
}
event.chart.chartCursor.addListener("changed", handleCursorChange);
event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
});
}
chartObj.legend.addListener('hideItem', legendHandler);
chartObj.legend.addListener('showItem', legendHandler);
chartObj.addListener("zoomed", syncZoom);
chartObj.addListener("init", addCursorListeners);
});
}
这是行不通的。
我可以请求有关如何以我实现的方式同步图表的指导吗?
更新的代码 - 尚未工作
现在,我调用addChartScrollSyncListener
以同步页面上的所有图表。
首先,图表消失了。但是,当我将鼠标移到图表div 上时,我看到沿其移动的鼠标光标(图表光标)以及图例值!!
我现在在调试控制台中收到此错误
TypeError: chartList[x].chartCursor.isZooming is not a function
chartList[x].chartCursor.isZooming(event.target.zooming);
这是addChartSyncListener
函数
function addChartSyncListener() {
var chartList = AmCharts.charts;
for (var x in chartList) {
chartList[x].addListener("zoomed", syncZoom);
chartList[x].addListener("init", addCursorListeners);
}
}
function addCursorListeners(event) {
event.chart.chartCursor.addListener("changed", handleCursorChange);
event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
}
function syncZoom(event) {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (charts[x].ignoreZoom) {
chartList[x].ignoreZoom = false;
}
if (event.chart != chartList[x]) {
chartList[x].ignoreZoom = true;
chartList[x].zoomToDates(event.startDate, event.endDate);
}
}
}
function handleCursorChange(event) {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (event.chart != chartList[x]) {
if (event.position) {
chartList[x].chartCursor.isZooming(event.target.zooming);
chartList[x].chartCursor.selectionPosX = event.target.selectionPosX;
chartList[x].chartCursor.forceShow = true;
chartList[x].chartCursor.setPosition(event.position, false, event.target.index);
}
}
}
}
function handleHideCursor() {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (charts[x].chartCursor.hideCursor) {
chartList[x].chartCursor.forceShow = false;
chartList[x].chartCursor.hideCursor(false);
}
}
}
这里最重要的是使用最新版本的amcharts。由于我在版本 3 上,我的问题变成了一个问题。下载 3.1.8 版后,一切正常。
function addChartSyncListener() {
var chartList = AmCharts.charts;
for (var x in chartList) {
chartList[x].addListener("zoomed", syncZoom);
chartList[x].addListener("init", addCursorListeners);
}
}
function addCursorListeners(event) {
event.chart.chartCursor.addListener("changed", handleCursorChange);
event.chart.chartCursor.addListener("onHideCursor", handleHideCursor);
}
function syncZoom(event) {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (charts[x].ignoreZoom) {
chartList[x].ignoreZoom = false;
}
if (event.chart != chartList[x]) {
chartList[x].ignoreZoom = true;
chartList[x].zoomToDates(event.startDate, event.endDate);
}
}
}
function handleCursorChange(event) {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (event.chart != chartList[x]) {
if (event.position) {
chartList[x].chartCursor.isZooming(event.target.zooming);
chartList[x].chartCursor.selectionPosX = event.target.selectionPosX;
chartList[x].chartCursor.forceShow = true;
chartList[x].chartCursor.setPosition(event.position, false, event.target.index);
}
}
}
}
function handleHideCursor() {
var chartList = AmCharts.charts;
for (var x in chartList) {
if (charts[x].chartCursor.hideCursor) {
chartList[x].chartCursor.forceShow = false;
chartList[x].chartCursor.hideCursor(false);
}
}
}
相关文章:
- 在控制器和数据对象之间同步数据
- 如何在异步函数与Deferredjquery之间同步
- 异步函数调用是否可以在两个同步语句之间完成
- Node.js&两个请求之间的Express/Can上下文切换可以是同步代码
- 通过服务在控制器之间同步数据
- 使用关键帧图像旋转器时,图像不会在两个块之间同步协调
- 流星注销 在选项卡之间不同步
- 如何在 2 个角度 UI 网格之间同步列排序
- 用户和服务器之间的HTML5同步
- 在多个基于日期的序列图表之间同步缩放和光标
- 如何将音频源与外部视频以及两者之间的交叉音量同步
- 如何在客户端之间同步microphysics.js
- chrome.storage.sync没有'无法在机器之间同步
- 如何在it块之间同步操作
- JQuery在2个单选按钮组之间同步所选单选按钮
- 如何在两个连接之间同步数据
- 如何在angular的指令和控制器之间同步$scope
- 用于在客户端和node.js服务器之间同步数据的JavaScript库
- Javascript在选项卡之间同步代码执行
- 为用户在webapp(iphone, droid, blackberry)和互联网之间同步信息