我正在尝试使用Google图表创建散点图,但似乎无法添加列作为工具提示。我阅读了各种资料,指出数据定义应为:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// A column for custom tooltip content
data.addColumn({type: 'string',role: 'tooltip',});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
但是,它不起作用。
JSFiddle演示问题:https://jsfiddle.net/shakedk/c37L0d1n/
材料图表不支持列角色,以及其他几个选项。
请参阅-> Tracking Issue for Material Chart Feature Parity
对于自定义工具提示,您将需要使用经典图表。
材料 = google.charts.Scatter
-包装:'scatter'
经典 = google.visualization.ScatterChart
-包:'corechart'
请参阅以下工作片段...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
// A column for custom tooltip content
data.addColumn({
type: 'string',
role: 'tooltip',
});
data.addRows([
['Name1', 1000, 'Tooltip string'],
['Name2', 1170, 'Tooltip string'],
['Name3', 660, 'Tooltip string'],
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Example',
},
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatterchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="scatterchart_material"></div>