Google图表工具提示不起作用 [英] Google Chart Tooltip Not Working
问题描述
我目前正在使用ASP.NET并使用ASP.NET连接到数据库（SQL Server）。但我在尝试自定义工具提示时遇到了问题。
这是标题代码：
< script src =js / jquery / jquery-1.10.2.jstype =text / javascript>< / script>
< script src =http://www.google.com/jsapitype =text / javascript>< / script>
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script>
< script type =text / javascript>
google.charts.load（'1.1'，{'packages'：['bar']}）;
< / script>
< script type =text / javascript>
$（函数（）{
$ .ajax（{
类型：'POST'，
dataType：'json'，
contentType：'application / json' ，
url：'sample_page.aspx / GetChartData'，
data：'{}'，
success：function（response）{
drawchart（response.d）; //调用方法
}，
错误：function（）{
alert（Error Loading Data）;
}
}）;
$ b $）
函数drawchart（dataValues）{
//创建和填充数据表的回调，
//实例化饼图，传入数据和
//绘制它。
//实例化并绘制我们的图表，传递一些选项
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'}）; $ var
$ b（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'，//必须为材质条形图
轴：{
x：{
0：{side：'top'，label： ''}，//顶部x轴。
}，
y：{
0：{label：''} //侧边y轴
}
}，
bar：{groupWidth：'70％'}，
}）;
}
< / script>
不幸的是，该工具提示不起作用。只有客户名称和工具提示上的百分比显示。
![示例生成的图表](\"https://i.stack.imgur.com/STsTi.png\"){kind=link}
不幸的是，列角色（包括工具提示）不适用于 Material 图表，只有 Core
- > packages：['bar'] + google.charts.Bar $ b
Core - > packages：['corechart'] + google.visualization.BarChart
您可以使用以下配置选项来获取 Core >接近外观&感觉材料
主题：'材料'
note 1 ：使用工具提示列时，必须提供所有工具提示内容，不会将任何内容追加到默认工具提示中。
请参阅以下工作片段...
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =BarChartsDIV>< / div> ：为了使HTML工具提示能够正常工作，您必须包含一个列属性
data.addColumn（{type：'string'，role：'tooltip'，p：{html：true
请参阅以下工作片段...
< pre-class =snippet-code-js lang-js prettyprint-override> google.charts.load（'current'，{callback：function（）{// data dataValues = [{customer： 'Customer A'，percent_submitted：10}，{customer：'Customer B'，percent_submitted：20}，{customer：'Customer C'，percent_submitted：30}，]; drawchart（dataValues）; }，packages：['corechart']}）;函数drawchart（dataValues）{//创建和填充数据表的回调函数，//实例化饼图，传入数据并//绘制数据。 //实例化并绘制我们的图表，传递一些选项var chart = new google.visualization.BarChart（document.getElementById（'BarChartsDIV'））; var data = new google.visualization.DataTable（）; data.addColumn（'string'，'customer'）; data.addColumn（'number'，'percent_submitted'）//包含html工具提示的列属性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 +'％ '}，//需要包含自己的样式'< 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'，//必须为材质条形图。轴：{x：{0：{side：'top'，label：''}，// Top x轴。}，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>
注3 ：对于 Material 图表，它们默认显示格式化值（ f：），因此您可以在其中添加一些文本，或者在列标题结尾，这将是所有行
请参阅以下工作片段...
OTHER TOOLTIP TEXT FOR ALL ROWS'）） {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'，//必须为材质条形图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> 注意4 ：尽管不推荐，但可以手动修改工具提示通过SVG DOM，当图表的'ready'事件触发时...
I am currently working on Google Chart using ASP.NET and connecting it to the database (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
Core --> packages: ['corechart'] + google.visualization.BarChart
you can use the following configuration option to get Core close to the look & feel of 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
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
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
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...
这篇关于Google图表工具提示不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
