gpt4 book ai didi

javascript - 为什么自定义工具提示不显示?

转载 作者:太空宇宙 更新时间:2023-11-04 16:10:44 25 4
gpt4 key购买 nike

我试图在栏上移动时显示自定义工具提示,它始终显示默认工具提示。我只是想在工具提示中显示一个简单的html代码,这样我就可以在之后修改它我缺少什么?谢谢

 google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});



var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});



var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}

console.log(rows);
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}

for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}

var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
//trigger: 'none'
isHtml: true
}
};


google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});



// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);


chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>

最佳答案

参见 data format对于时间线图表...

Column 0 - Row label
Column 1 - Bar label (optional)
Column 2 - Tooltip (optional)
Column 3 - Start
Column 4 - End

问题源于观点...
view.setColumns([0,2,3,4,5]);

因此图表认为第 2 列是条形标签

可以通过将第 2 列与第 3 列交换来纠正该问题
view.setColumns([0, 3, 2, 4, 5]);

请参阅以下工作片段...

google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);


function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});



var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});



var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}

dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}

for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}

var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
isHtml: true
}
};


google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});



// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 3, 2, 4, 5]);


chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>

关于javascript - 为什么自定义工具提示不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41527298/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com