为 Google 组合图创建自定义工具提示
Creating custom tooltip for 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"
}
但是，当悬停在阶梯区域上时，会显示默认工具提示。
只有将鼠标悬停在虚线上时才能看到新的自定义工具提示。
请问如何启用自定义工具提示？
工具提示列角色将只代表它后面的数据列...
在任何地方启用自定义工具提示，
您需要在每个数据列之后添加一个工具提示列...
请参阅以下工作片段...
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>
对于我的问题我准备了一个简单的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"
}
但是，当悬停在阶梯区域上时，会显示默认工具提示。
只有将鼠标悬停在虚线上时才能看到新的自定义工具提示。
请问如何启用自定义工具提示？
工具提示列角色将只代表它后面的数据列...
在任何地方启用自定义工具提示，
您需要在每个数据列之后添加一个工具提示列...
请参阅以下工作片段...
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>