为Google Combo Chart创建自定义工具提示
对于我的问题，我准备了一个简单的JSFiddle：
在带有阶梯区域和虚线的组合图表中，我试图显示a tooltip with custom text，因为默认文本（上面屏幕截图中的“652 Win：85”）很难理解。
我的JavaScript代码如下（数据实际上来自PHP脚本+数据库，但为了简单起见，我只是将其放入jsonData变量中）：
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawComboChart);
function drawComboChart() {
var jsonData = {
"cols": [{
"label": "Game",
"type": "string"
},
{
"label": "Win",
"type": "number"
},
{
"label": "Defeat",
"type": "number"
},
{
"label": "Draw",
"type": "number"
},
{
"label": "Opponent score",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
}
],
"rows": [{
"c": [{
"v": 646
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 646 0:10 lost"
}
]
},
{
"c": [{
"v": 647
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 13
},
{
"v": "Game 647 0:13 won"
}
]
},
{
"c": [{
"v": 648
},
{
"v": 22
},
{
"v": 0
},
{
"v": 0
},
{
"v": 23
},
{
"v": "Game 648 22:23 won"
}
]
},
{
"c": [{
"v": 651
},
{
"v": 13
},
{
"v": 0
},
{
"v": 0
},
{
"v": 31
},
{
"v": "Game 651 13:31 won"
}
]
},
{
"c": [{
"v": 652
},
{
"v": 85
},
{
"v": 0
},
{
"v": 0
},
{
"v": 75
},
{
"v": "Game 652 85:75 won"
}
]
},
{
"c": [{
"v": 653
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 653 0:10 lost"
}
]
},
{
"c": [{
"v": 654
},
{
"v": 18
},
{
"v": 0
},
{
"v": 0
},
{
"v": 12
},
{
"v": "Game 654 18:12 won"
}
]
},
{
"c": [{
"v": 655
},
{
"v": 0
},
{
"v": 10
},
{
"v": 0
},
{
"v": 22
},
{
"v": "Game 655 10:22 lost"
}
]
},
{
"c": [{
"v": 661
},
{
"v": 0
},
{
"v": 33
},
{
"v": 0
},
{
"v": 44
},
{
"v": "Game 661 33:44 lost"
}
]
},
{
"c": [{
"v": 666
},
{
"v": 0
},
{
"v": 5
},
{
"v": 0
},
{
"v": 18
},
{
"v": "Game 666 5:18 lost"
}
]
},
{
"c": [{
"v": 682
},
{
"v": 0
},
{
"v": 95
},
{
"v": 0
},
{
"v": 107
},
{
"v": "Game 682 95:107 lost"
}
]
},
{
"c": [{
"v": 686
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 686 0:10 lost"
}
]
},
{
"c": [{
"v": 733
},
{
"v": 389
},
{
"v": 0
},
{
"v": 0
},
{
"v": 387
},
{
"v": "Game 733 389:387 won"
}
]
},
{
"c": [{
"v": 737
},
{
"v": 29
},
{
"v": 0
},
{
"v": 0
},
{
"v": 12
},
{
"v": "Game 737 29:12 won"
}
]
},
{
"c": [{
"v": 979
},
{
"v": 152
},
{
"v": 0
},
{
"v": 0
},
{
"v": 70
},
{
"v": "Game 979 152:70 won"
}
]
}
]
};
var dt = new google.visualization.DataTable(jsonData);
//dt.addColumn({type: 'string', role: 'tooltip'});
var options = {
width: 480,
height: 360,
legend: {
position: 'top',
alignment: 'center',
maxLines: 2
},
seriesType: 'steppedArea',
series: {
3: {
type: 'line',
lineWidth: 1,
color: '000000',
lineDashStyle: [4, 2]
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dt, options);
}
正如您在上面的代码中看到的，我添加了一列：
{
"role": "tooltip",
"type": "string"
}
并尝试使用以下值填充它：
{
"v": "Game 737 29:12 won"
}
但是，当悬停在阶梯区域上时，会显示默认的工具提示。
仅当悬停在虚线上时，才能看到新的自定义工具提示。
如何在任何地方启用自定义工具提示？
1 个答案:
答案 0 :(得分：1)
工具提示列角色仅代表其遵循的数据列...
到在任何地方启用自定义工具提示，
您需要在每个数据列之后添加工具提示列...
请参阅以下工作代码段...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawComboChart);
function drawComboChart() {
var jsonData = {
"cols": [{
"label": "Game",
"type": "string"
},
{
"label": "Win",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
},
{
"label": "Defeat",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
},
{
"label": "Draw",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
},
{
"label": "Opponent score",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
}
],
"rows": [{
"c": [{
"v": 646
},
{
"v": 0
},
{
"v": "Game 646 0:10 lost"
},
{
"v": 0
},
{
"v": "Game 646 0:10 lost"
},
{
"v": 0
},
{
"v": "Game 646 0:10 lost"
},
{
"v": 10
},
{
"v": "Game 646 0:10 lost"
}
]
},
{
"c": [{
"v": 647
},
{
"v": 0
},
{
"v": "Game 647 0:13 won"
},
{
"v": 0
},
{
"v": "Game 647 0:13 won"
},
{
"v": 0
},
{
"v": "Game 647 0:13 won"
},
{
"v": 13
},
{
"v": "Game 647 0:13 won"
}
]
},
{
"c": [{
"v": 648
},
{
"v": 22
},
{
"v": "Game 648 22:23 won"
},
{
"v": 0
},
{
"v": "Game 648 22:23 won"
},
{
"v": 0
},
{
"v": "Game 648 22:23 won"
},
{
"v": 23
},
{
"v": "Game 648 22:23 won"
}
]
},
{
"c": [{
"v": 651
},
{
"v": 13
},
{
"v": "Game 651 13:31 won"
},
{
"v": 0
},
{
"v": "Game 651 13:31 won"
},
{
"v": 0
},
{
"v": "Game 651 13:31 won"
},
{
"v": 31
},
{
"v": "Game 651 13:31 won"
}
]
},
{
"c": [{
"v": 652
},
{
"v": 85
},
{
"v": "Game 652 85:75 won"
},
{
"v": 0
},
{
"v": "Game 652 85:75 won"
},
{
"v": 0
},
{
"v": "Game 652 85:75 won"
},
{
"v": 75
},
{
"v": "Game 652 85:75 won"
}
]
},
{
"c": [{
"v": 653
},
{
"v": 0
},
{
"v": "Game 653 0:10 lost"
},
{
"v": 0
},
{
"v": "Game 653 0:10 lost"
},
{
"v": 0
},
{
"v": "Game 653 0:10 lost"
},
{
"v": 10
},
{
"v": "Game 653 0:10 lost"
}
]
},
{
"c": [{
"v": 654
},
{
"v": 18
},
{
"v": "Game 654 18:12 won"
},
{
"v": 0
},
{
"v": "Game 654 18:12 won"
},
{
"v": 0
},
{
"v": "Game 654 18:12 won"
},
{
"v": 12
},
{
"v": "Game 654 18:12 won"
}
]
},
{
"c": [{
"v": 655
},
{
"v": 0
},
{
"v": "Game 655 10:22 lost"
},
{
"v": 10
},
{
"v": "Game 655 10:22 lost"
},
{
"v": 0
},
{
"v": "Game 655 10:22 lost"
},
{
"v": 22
},
{
"v": "Game 655 10:22 lost"
}
]
}
]
};
var dt = new google.visualization.DataTable(jsonData);
//dt.addColumn({type: 'string', role: 'tooltip'});
var options = {
width: 480,
height: 360,
legend: {
position: 'top',
alignment: 'center',
maxLines: 2
},
seriesType: 'steppedArea',
series: {
3: {
type: 'line',
lineWidth: 1,
color: '000000',
lineDashStyle: [4, 2]
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dt, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？