gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 22:05:27 25 4
gpt4 key购买 nike

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

提前致谢。

最佳答案

虽然这在以前很困难,但最近对 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

关于charts - 向 Google Visualization 的 LineChart 添加垂直线标记,该标记会随着鼠标移动而移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18596453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com