Question

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

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

选择：

实际结果：

预期：

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

结果：

注意：如果我改为使用缩放滚动条选择日期范围，则可以愉快地选择空白区域而不进行捕捉。我希望选择逻辑的行为方式相同。

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 - 缩放到选择捕捉到最近的点而不是选定的日期范围

1 个答案: