charts - 向 Google Visualization 的 LineChart 添加垂直线标记，该标记会随着鼠标移动而移动？

Question

是否可以在 LineChart 上显示显示当前 x 轴值的垂直线标记，并在鼠标移动时移动？

提前致谢。

Answer 1

虽然这在以前很困难，但最近对 API 的更新使它变得容易多了!您需要使用鼠标悬停事件处理程序来获取鼠标坐标，并使用新的 ChartLayoutInterface 将坐标转换为图表值。下面是一些示例代码:

[编辑 - 修复了跨浏览器兼容性问题]
*[编辑 - 更新以获取注释线附近点的值]*

function drawChart() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    // add an "annotation" role column to the domain column
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'y');

    // add 100 rows of pseudorandom data
    var y = 50;
    for (var i = 0; i < 100; i++) {
        y += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
        data.addRow([i, null, y]);
    }
    // add a blank row to the end of the DataTable to hold the annotations
    data.addRow([null, null, null]);
    // get the index of the row used for the annotations
    var annotationRowIndex = data.getNumberOfRows() - 1;

    var options = {
        annotation: {
            1: {
                // set the style of the domain column annotations to "line"
                style: 'line'
            }
        },
        height: 400,
        width: 600
    };

    // create the chart
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    // create 'ready' event listener to add mousemove event listener to the chart
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        // create mousemove event listener in the chart's container
        // I use jQuery, but you can use whatever works best for you
        $('#chart_div').mousemove(function (e) {
            var xPos = e.pageX - container.offsetLeft;
            var yPos = e.pageY - container.offsetTop;
            var cli = chart.getChartLayoutInterface();
            var xBounds = cli.getBoundingBox('hAxis#0#gridline');
            var yBounds = cli.getBoundingBox('vAxis#0#gridline');

            // is the mouse inside the chart area?
            if (
                (xPos >= xBounds.left || xPos <= xBounds.left + xBounds.width) &&
                (yPos >= yBounds.top || yPos <= yBounds.top + yBounds.height) 
            ) {
                // if so, draw the vertical line here
                // get the x-axis value at these coordinates
                var xVal = cli.getHAxisValue(xPos);
                // set the x-axis value of the annotation
                data.setValue(annotationRowIndex, 0, xVal);
                // set the value to display on the line, this could be any value you want
                data.setValue(annotationRowIndex, 1, xVal.toFixed(2));

                // get the data value (if any) at the line
                // truncating xVal to one decimal place,
                // since it is unlikely to find an annotation like that aligns precisely with the data
                var rows = data.getFilteredRows([{column: 0, value: parseFloat(xVal.toFixed(1))}]);
                if (rows.length) {
                    var value = data.getValue(rows[0], 2);
                    // do something with value
                }

                // draw the chart with the new annotation
                chart.draw(data, options);
            }
        });
    });

    // draw the chart
    chart.draw(data, options);
}

看到它在这里工作: http://jsfiddle.net/asgallant/tVCv9/12