在多个基于日期的系列图表中同步缩放和光标

Question

我正在尝试按照此处的示例跨多个折线图实现光标同步和缩放。

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 上时，我看到鼠标光标 (chartcursor) 移动，还有图例值！！

我现在在调试控制台中收到此错误

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);
        }
    }
}

Answer 1

这里最重要的是使用最新版本的 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);
        }
    }
}

在多个基于日期的系列图表中同步缩放和光标

Syncing zoom and cursor across several date-based serial charts

javascript

amcharts