在Google Chart上添加自定义工具提示可以通过以下步骤实现:
google.visualization.arrayToDataTable()
方法将数据表转换为Google Chart所需的格式。google.visualization.ChartWrapper()
方法创建一个图表包装器对象,并将数据表作为参数传递给它。chartWrapper.getChart()
方法获取图表对象,并使用chartWrapper.draw()
方法绘制图表。google.visualization.events.addListener()
方法添加一个事件监听器,以便在鼠标悬停在图表上时触发自定义工具提示。chart.getSelection()
方法获取鼠标悬停的数据点,并使用chart.getChartLayoutInterface().getBoundingBox()
方法获取数据点的位置信息。chart.getContainer().appendChild()
方法将自定义工具提示添加到图表容器中。以下是一个示例代码,演示如何在Google Chart上添加自定义工具提示:
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2016', 1000, 400],
['2017', 1170, 460],
['2018', 660, 1120],
['2019', 1030, 540]
]);
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: data,
options: {
title: 'Sales and Expenses',
width: 600,
height: 400
}
});
var chart = chartWrapper.getChart();
google.visualization.events.addListener(chart, 'onmouseover', function(e) {
var selection = chart.getSelection();
if (selection.length > 0) {
var row = selection[0].row;
var column = selection[0].column;
var value = data.getValue(row, column);
var tooltip = document.createElement('div');
tooltip.innerHTML = 'Value: ' + value;
tooltip.style.position = 'absolute';
tooltip.style.left = e.pageX + 'px';
tooltip.style.top = e.pageY + 'px';
tooltip.style.backgroundColor = 'white';
tooltip.style.border = '1px solid black';
tooltip.style.padding = '5px';
chart.getContainer().appendChild(tooltip);
}
});
chartWrapper.draw(document.getElementById('chart_div'));
}
在上述示例代码中,我们创建了一个柱状图,并在鼠标悬停在柱状图上时显示该数据点的值。你可以根据自己的需求修改自定义工具提示的内容和样式。
注意:以上示例代码仅适用于Google Chart,不适用于其他云计算品牌商的图表库。
领取专属 10元无门槛券
手把手带您无忧上云