Google Chart工具提示不起作用

我目前正在使用ASP.NET处理Google Chart并将其连接到数据库（SQL Server）。 但是在尝试自定义工具提示时遇到问题。

这是标题代码：

    google.charts.load('1.1', { 'packages': ['bar'] });   $(function () { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'sample_page.aspx/GetChartData', data: '{}', success: function (response) { drawchart(response.d); // calling method }, error: function () { alert("Error Loading Data"); } }); }) function drawchart(dataValues) { // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. // Instantiate and draw our chart, passing in some options var chart = new google.charts.Bar(document.getElementById('BarChartsDIV')); var data = new google.visualization.DataTable(); data.addColumn('string', 'customer'); data.addColumn('number', 'percent_submitted') data.addColumn({type: 'string', role: 'tooltip'}); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].customer, { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted+ '%'},'TEST TOOL TIP']); } var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2]); chart.draw(view, { tooltip: { isHtml: true}, title: "", legend: { position: 'none' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: '' }, // Top x-axis. }, y: { 0: { label: '' } //Side y-axis } }, bar: { groupWidth: '70%' }, }); }  

不幸的是，工具提示不起作用。 工具提示上仅显示客户名称和百分比。

生成图表示例

Answer 1

遗憾的是， Column Roles （包括工具提示）不适用于Material Chart，只适用于Core

材料 – > packages: ['bar'] + google.charts.Bar

核心 – > packages: ['corechart'] + google.visualization.BarChart

您可以使用以下配置选项使Core接近Material的外观

theme: 'material'

注意1 ：使用工具提示列时，必须提供所有工具提示内容，它不会向默认工具提示附加任何内容

请参阅以下工作代码段…

 google.charts.load('current', { callback: function () { // simulate data dataValues = [ { customer: 'Customer A', percent_submitted: 10 }, { customer: 'Customer B', percent_submitted: 20 }, { customer: 'Customer C', percent_submitted: 30 }, ]; drawchart(dataValues); }, packages: ['corechart'] }); function drawchart(dataValues) { // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. // Instantiate and draw our chart, passing in some options var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV')); var data = new google.visualization.DataTable(); data.addColumn('string', 'customer'); data.addColumn('number', 'percent_submitted') data.addColumn({type: 'string', role: 'tooltip'}); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].customer, { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'}, dataValues[i].customer + '\nTEST TOOL TIP\n' + dataValues[i].percent_submitted + '%']); } var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2]); chart.draw(view, { theme: 'material', tooltip: { isHtml: true}, title: "", legend: { position: 'none' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: '' }, // Top x-axis. }, y: { 0: { label: '' } //Side y-axis } }, bar: { groupWidth: '70%' }, }); } 

Answer 2

我需要在Google Charts表格中将Catherine Manzo归功于此。 从图表选项和宾果游戏中删除focusTarget ！

Catherine Manzo说：我终于回过头来比较我的新图表的html代码和今年夏天工具提示工作时的代码。 我意识到在新代码（focusTarget）中有一个额外的属性，当我删除它时，工具提示function再次开始工作！ 要删除的属性在下面的代码中突出显示：

 chart.opts = {title:"Company Performance",titlePosition:"out",focusTarget:"default",colors:['#66CDAA','#E0FFFF'],pointShape:"circle",hAxis: {format:"$ #,###.##",textPosition:"default",title:"In Thousands",slantedText:true,viewWindowMode:"default"},tooltip:{isHtml:false}}; 

Answer 3

添加注意。

注5：

如果您使用google.visualization则只能修改tooltip ：

 new google.visualization.LineChart(divChart).draw(dataTable,options); 

不是google.charts ：

 new google.charts.Line(divChart).draw(dataTable,options); 

但是，请确保在google.visualization的选项中包含theme: 'material'以使主题现代化。