Javascript Google图表-工具提示中显示的HTML源代码
我正在尝试使用Google图表,在工具提示中使用HTML显示饼图。Javascript Google图表-工具提示中显示的HTML源代码,javascript,google-visualization,Javascript,Google Visualization,我正在尝试使用Google图表,在工具提示中使用HTML显示饼图。 我遇到的问题是HTML源代码正在显示出来。我在数据列上设置了html:true,在选项中设置了tooltip.isHtml,我真的不确定现在还可以尝试什么! 以下是我的JS源代码: google.setOnLoadCallback( drawChart_1 ); function drawChart_1() { var data = google.visualization.arrayToDataTable( [ ['','
我遇到的问题是HTML源代码正在显示出来。我在数据列上设置了html:true,在选项中设置了tooltip.isHtml,我真的不确定现在还可以尝试什么! 以下是我的JS源代码:
google.setOnLoadCallback( drawChart_1 );
function drawChart_1() {
var data = google.visualization.arrayToDataTable( [
['','',''],
['Thing 1' , 200 , '<b>Thing 1</b><br/>£200 (14%)' ],
['Thing 2' , 400 , '<b>Thing 2</b><br/>£400 (29%)' ],
['Thing 3' , 600 , '<b>Thing 3</b><br/>£600 (43%)' ],
['Thing 4' , 200 , '<b>Thing 4</b><br/>£200 (14%)' ],
]);
data.setColumnProperty(2,'role','tooltip');
data.setColumnProperty(2,'html','true');
data.setColumnProperty(2,'p',{'html':true}); // tried with, and without this (and the next) line
//data.setColumnProperty(2,'properties',{'html':true});
var options = {"height":300,"pieSliceText":"none","tooltip.isHtml":true,"pieHole":0.5,"legend":"none","pieSliceTextStyle":"none","chartArea":{"width":"100%","height":"80%"},"slices":[{"color":"#959595"},{"color":"#616161"},{"color":"#005131"},{"color":"#e2e2e2"}]};
var chart = new google.visualization.PieChart( document.getElementById( 'piechart_div_1' ) );
chart.draw( data , options );
}
google.setOnLoadCallback(绘图1);
功能图_1(){
var data=google.visualization.arrayToDataTable([
['','',''],
[Thing1',200',Thing1
200英镑(14%),
[Thing2',400',Thing2
400英镑(29%),
[Thing3',600',Thing3
600英镑(43%),
[Thing4',200',Thing4
200英镑(14%),
]);
setColumnProperty(2,'role','tooltip');
setColumnProperty(2,'html','true');
data.setColumnProperty(2,'p',{'html':true});//尝试使用或不使用此行(和下一行)
//setColumnProperty(2,'properties',{'html':true});
变量选项={“高度”:300,“PieSiceText”:“无”,“工具提示.isHtml”:true,“pieHole”:0.5,“图例”:“无”,“PieSiceTextStyle”:“无”,“图表区”:{“宽度”:“100%”,“高度”:“80%”,},“切片”:[{“颜色”:“#959595”},{“颜色”:“#61616161”},{“颜色”:“#005131”},{“颜色”:“颜色”:{“颜色”:;
var chart=new google.visualization.PieChart(document.getElementById('PieChart\u div\u 1');
图表绘制(数据、选项);
}
那么,有人知道我在这件事上错在哪里吗?搜索这个问题只是为我指明了将tooltip.isHtml设置为true的方向,我已经这样做了。一些结果为我指明了在数据列上设置html:true的方向-在代码中,您可以看到一些尝试,但没有任何影响。一些事情
首先,可以在数组中提供列定义
var data = google.visualization.arrayToDataTable([
['' , '' , {type:"string" , role:"tooltip" , p:{"html":true}}],
...
]);
而且肯定需要p:{“html”:true}
接下来,在选项
中,工具提示
应该是带有键的对象
"tooltip": {
"isHtml":true
},
vs
“tooltip.isHtml”:true
请参阅以下工作片段
google.charts.load('current'{
回调:函数(){
var data=google.visualization.arrayToDataTable([
[“”,,{type:“string”,role:“tooltip”,p:{“html”:true}},
[Thing1',200',Thing1
200英镑(14%),
[Thing2',400',Thing2
400英镑(29%),
[Thing3',600',Thing3
600英镑(43%),
[Thing4',200',Thing4
200英镑(14%),
]);
变量选项={
“高度”:300,
“文本”:“无”,
“工具提示”:{
“isHtml”:真的吗
},
“pieHole”:0.5,
“图例”:“无”,
“文本样式”:“无”,
“图表区”:{
“宽度”:“100%”,
“高度”:“80%”
},
“切片”:[
{“颜色”:“#9595”},
{“颜色”:“#6161”},
{“颜色”:“#005131”},
{“颜色”:“#e2”}
]
};
var chart=new google.visualization.PieChart(document.getElementById('PieChart\u div\u 1');
图表绘制(数据、选项);
},
软件包:['corechart']
});代码>
谢谢你,这段代码运行得很好,为我指出了错误构建isHtml的方向。我发现由于某种原因,我的代码中实际上不需要p:{“html”:true}。