[英]Google Chart Tooltip Not Working
I am currently working on Google Chart using ASP.NET and connecting it to the database (SQL Server). 我目前正在使用ASP.NET处理Google Chart,并将其连接到数据库(SQL Server)。 But I have a problem when trying to customize the tool tip. 但是尝试自定义工具提示时出现问题。
Here's Header Code: 这是标题代码:
<script src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('1.1', { 'packages': ['bar'] });
</script>
<script type="text/javascript">
$(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%' },
});
}
</script>
Unfortunately, the tool tip doesn't work. 不幸的是,工具提示不起作用。 Only the Customer Name and the Percentage display on the tool tip. 工具提示上仅显示客户名称和百分比。
unfortunately, Column Roles , including tooltips, don't work with Material charts, only Core 不幸的是,包括工具提示在内的“ 列角色”不适用于材料图表,仅适用于核心
Material --> packages: ['bar']
+ google.charts.Bar
材料 -> packages: ['bar']
+ google.charts.Bar
Core --> packages: ['corechart']
+ google.visualization.BarChart
核心 -> packages: ['corechart']
+ google.visualization.BarChart
you can use the following configuration option to get Core close to the look & feel of Material 您可以使用以下配置选项使Core接近Material的外观
theme: 'material'
note 1 : when using a tooltip column, all of the tooltip content must be provided, it doesn't append anything to the default tooltip 注意1 :使用工具提示列时,必须提供所有工具提示内容,它不会在默认工具提示后附加任何内容
see following working snippet... 请参阅以下工作片段...
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%' }, }); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="BarChartsDIV"></div>
note 2 : for HTML tooltips to work, you must include a column property 注意2 :要使HTML工具提示起作用,必须包含column属性
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
see following working snippet... 请参阅以下工作片段...
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') // include column property for html tooltips data.addColumn({type: 'string', role: 'tooltip', p: {html: true}}); for (var i = 0; i < dataValues.length; i++) { data.addRow([dataValues[i].customer, { v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'}, // need to include own styling as well '<div class="ggl-tooltip">' + dataValues[i].customer + '<div>TEST TOOL TIP</div><div>' + dataValues[i].percent_submitted + '%</div></div>']); } 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%' }, }); }
.ggl-tooltip { border: 1px solid #E0E0E0; font-family: Arial, Helvetica; font-size: 12pt; padding: 12px 12px 12px 12px; } .ggl-tooltip div { padding-top: 6px; }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="BarChartsDIV"></div>
note 3 : as for Material charts, they show the formatted value ( f:
) by default, so you could add a bit of text there, or at the end of the column headings, which would be for all rows 注意3 :对于材料图表,默认情况下它们显示格式值( f:
:),因此您可以在此处或在列标题的末尾添加一些文本,该文本适用于所有行
see following working snippet... 请参阅以下工作片段...
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: ['bar'] }); 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 \\n OTHER TOOLTIP TEXT FOR ALL ROWS') 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]); 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%' }, }); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="BarChartsDIV"></div>
note 4 : although not recommended, it is possible to modify the tooltip manually via SVG DOM, when the chart's 'ready'
event fires... 注意4 :尽管不建议这样做,但是当图表的'ready'
事件触发时,可以通过SVG DOM手动修改工具提示。
I need to give credit to Catherine Manzo on the Google Charts Form for figuring this out. 我需要在Google图表表格中归功于Catherine Manzo,以弄清这一点。 Remove focusTarget from the chart Options and bingo!! 从图表选项和宾果游戏中删除focusTarget !
Catherine Manzo said: I finally went back and compared the html code for my new charts with ones made over the summer, when the tooltip worked. 凯瑟琳·曼佐(Catherine Manzo)说:我终于回过头来,将新图表的html代码与夏季在工具提示有效时制作的图表进行了比较。 I realized there was an extra attribute in the newer code (focusTarget) and when I deleted it, the tooltip function began working again! 我意识到在较新的代码(focusTarget)中还有一个额外的属性,当我删除它时,工具提示功能再次开始起作用! The attribute to delete is highlighted in the code below: 下面的代码突出显示了要删除的属性:
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}};
Adding to note. 添加到笔记。
note 5: 注5:
You can only modify tooltip
if you use google.visualization
like so: 只有使用google.visualization
您才能修改tooltip
:
new google.visualization.LineChart(divChart).draw(dataTable,options);
Not google.charts
: 不是google.charts
:
new google.charts.Line(divChart).draw(dataTable,options);
But, make sure to include theme: 'material'
in the options of google.visualization
to modernize the theme. 但是,请务必在google.visualization
选项中包括theme: 'material'
以使主题现代化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.