AmCharts

Question

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

例如，假定从现在起 7 天后有一个虚拟点，如果我 select 'now' 线的任一侧，它会缩放到虚拟点而不是显示 'now' 线路指南如我所料。

选择：

实际结果：

预计：

另一个示例：如果我 select 点在图表上，其中包含一些空白 space，AmCharts 将忽略我 select 编辑的日期范围并截断 select编辑范围到最后一点。

结果：

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

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 以获取工作演示。

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

AmCharts - zooming to selection snaps to nearest points instead of selected date range

javascript

charts