Javascript 工具提示html谷歌图表
我在JS中有一个工具提示设置,如下所示Javascript 工具提示html谷歌图表,javascript,google-visualization,Javascript,Google Visualization,我在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': t
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);
数组的右括号不正确 改变这个
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"])]);
对此
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] }
嗨,是的,这是可行的,但工具提示并没有奇怪地出现。看起来是这样的(请参阅文章中的编辑),非常感谢!还有一件事:我这样做了,但现在我的工具提示又不合适了,请编辑上面的内容。我重新编辑了我的html,但工具提示仍然显示在下面。我没有css。我已经在我的githu url中放置了以下内容:可能不是问题,但在结尾前有一个随机的
'
——如果您可以共享数据样本,可以尝试获取一个工作示例。。。