Charts 将垂直线标记添加到Google Visualization'；鼠标移动时移动的线条图？

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

---

提前感谢。

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

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

函数绘图图（）{
//创建并填充数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'number'，'x'）；
//将“批注”角色列添加到域列
addColumn（{type:'string'，role:'annotation'}）；
data.addColumn（'number'，'y'）；
//添加100行伪随机数据
变量y=50；
对于（变量i=0；i<100；i++）{
y+=Math.floor（Math.random（）*5）*Math.pow（-1，Math.floor（Math.random（）*2））；
data.addRow（[i，null，y]）；
}
//在DataTable的末尾添加一个空行以保存注释
data.addRow（[null，null，null]）；
//获取用于注释的行的索引
var annotationRowIndex=data.getNumberOfRows（）-1；
变量选项={
注释：{
1: {
//将域列批注的样式设置为“行”
风格：“线条”
}
},
身高：400，
宽度：600
};
//创建图表
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
//创建“就绪”事件侦听器以将mousemove事件侦听器添加到图表中
var runOnce=google.visualization.events.addListener（图表'ready'，函数（）{
google.visualization.events.removeListener（runOnce）；
//在图表容器中创建mousemove事件侦听器
//我使用jQuery，但是您可以使用最适合您的任何东西
$（'#chart_div'）.mousemove（函数（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'）；
//鼠标是否在图表区域内？
如果(
（xPos>=xBounds.left | | xPos=yBounds.top | | yPos是否有办法在鼠标悬停时以字符串形式找到注释值？在中，我想获取显示在移动行上的文本值。我想提醒该值。在本例中，注释值是动态创建的，因此您无需执行任何特殊操作即可获得它-它已经可用请参阅鼠标悬停代码（在这一行：
data.setValue（annotationRowIndex，1，xVal.toFixed（2））；
）。仅供参考，我更新了JSFIDLE以更正跨浏览器兼容性问题。是否可以在两个折线图上使用鼠标移动一行并显示数据（注释）因此？您是希望在与直线上的数据点相交时找到值，还是希望在其位于两个点之间时获得插值？仅供参考，由于我们计算鼠标沿轴位置的方式，注释线极不可能与数据点完全对齐，因此我编写代码的目的是查找靠近注释线的点。您还可以调整注释线的精度，使带有点的线更有可能与点对齐（假设数据点位于某个可预测的间隔上）。
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);
}