工具提示html谷歌图表
工具提示html谷歌图表
提问于 2018-07-21 21:27:30
我在JS中有如下工具提示设置
function createDashboard4() {
var json_results = getData('http://localhost:9999/countcarbytype')
data_results = []
var Header = ['car Type', 'count', 'region',{'type': 'string', 'role': 'tooltip', 'p': {'html': true}}];
data_results.push(Header)
for (var i = 0; i < json_results.length; i++) {
var value = json_results[i];
var URL = ""+value["imageURL"][0]
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))
}
console.log(data_results)
var data = google.visualization.arrayToDataTable(data_results);
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'region'
}
});
// Define a table visualization
var table = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart4',
'options': { 'height': 400, 'width': 500, 'title': 'Count of cars by Model Type', 'legend': 'none','tooltip': { isHtml: true } },
'view': { 'columns': [0, 1] }
});
// Create the dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the string filter to affect the table contents
bind(stringFilter, table).
// Draw the dashboard
draw(data);
return stringFilter;
}
google.setOnLoadCallback(drawVisualization);我做了一个createCustomHTMLContent的实现
function createCustomHTMLContent(imageURL, title, totalCount, region) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + imageURL + '" style="width:75px;height:50px"><br/>' +
'<table class="medals_layout">' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + title + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalCount + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + region + '</b></td>' + '</tr>' + '</table>' + '</div>';
}然而，它给了我一个错误，没有捕获的错误:行0有3列，但必须有4列。我确信我已经按照程序添加了HTML工具提示。
我做错什么了？
EDIT 1:
示例数据：
[{"_id":{"title":"Mercedes Benz C Class 220 CDI Elegance AT (2009) in Mumbai","region":"Mumbai"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201807/1405424_71524_1_1530437796289.jpeg?v=27"]},{"_id":{"title":"Mercedes Benz C Class 220 CDI Sport (2012) in Coimbatore","region":"Coimbatore"},"countofcars":2,"imageURL":["https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27","https://imguct3.aeplcdn.com/img/340x192/lis/201806/1402641_71493_1_1530177529608.jpeg?v=27"]}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-21 21:33:25
数组的右括号位置不正确...
改变这个..。
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"]],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"]))对这个..。
data_results.push([value["_id"]["title"], value["countofcars"], value["_id"]["region"],createCustomHTMLContent(URL,value["_id"]["title"], value["countofcars"], value["_id"]["region"])]);编辑
还需要将工具提示列添加到图表视图...
改变...
'view': { 'columns': [0, 1] }为了..。
'view': { 'columns': [0, 1, 3] }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51456535
复制相关文章
相似问题