javascript - AmCharts - 缩放到选择捕捉到最近的点而不是选定的日期范围

Question

在示例 CodePen 中，http://codepen.io/anon/pen/vKabjQ , 我想在图表上选择一个空白区域，而不是让它捕捉到最近的点。

例如，假设从现在起 7 天有一个虚拟点，如果我选择“现在”线的任一侧，它会缩放到虚拟点，而不是像我期望的那样显示“现在”线指南。

选择:

实际结果:

预期:

另一个例子:如果我在图表上选择包含一些空白的点，AmCharts 将忽略我选择的日期范围并将所选范围 chop 到最后一个点。

结果:

注意:如果我改为使用缩放滚动条来选择日期范围，它会很高兴地选择一个空白区域而不会对齐。我希望选择逻辑以相同的方式运行。

CodePen 代码 - http://codepen.io/anon/pen/vKabjQ :

var now = new Date();
var chartData = generateChartData(now);
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": chartData,
    "valueAxes": [{
      "includeAllValues": true
    }],
  "guides": [
    {
      "date": now,
      "lineColor": "#CCCCCC",
      "lineAlpha": 1,
      "lineThickness": 2,
      "dashLength": 10,
      "inside": true,
      "labelRotation": 90,
      "label": "now"
  }],
    "mouseWheelZoomEnabled": true,
    "graphs": [{
        "id": "g1",
        "valueField": "value",
    }],
    "chartScrollbar": {
        "graph": "g1",
        "scrollbarHeight": 50
    },
    "chartCursor": {
      "cursorPosition": "mouse"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
    }
});

function generateChartData(now) {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 150);

    for (var i = 0; i < 100; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var value = Math.random();

        chartData.push({
            date: newDate,
            value: value
        });
    }

    var weekAhead = new Date(now);
    weekAhead.setDate(weekAhead.getDate() + 7)

    chartData.push({
      date: weekAhead,
      dummy: true
    });

    return chartData;
}

Answer 1

这实际上是我现在多次遇到的问题，因为 chartCursor 似乎没有属性改变这种获取最近数据点作为选择范围的行为。

我的解决方法是配置 chartCursor停止自动缩放，而是在 zoomed 上连接自定义处理程序事件。然后您可以从光标访问实际选择的时间范围并手动缩放图表。
有必要让两个日期按正确的顺序排列，这样 zoom 功能才能正常工作。

chart.chartCursor.addListener("selected", function(o) {
    var start = Math.min(o.target.timestamp0, o.target.timestamp);
    var end = Math.max(o.target.timestamp0, o.target.timestamp);
    chart.zoom(start, end);
});

查看此 fiddle用于工作演示。