从特定系列的谷歌可视化折线图中删除悬停工具提示
Remove hover tooltip from specific series Google Visualization line chart
google.charts.load('current', { packages: ['corechart', 'line'] });
function DrawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', '%97');
data.addColumn('number', '%85');
data.addColumn('number', '%50');
data.addColumn('number', '%15');
data.addColumn('number', '%3');
data.addColumn('number', 'Points');
data.addColumn({ type: 'string', role: 'tooltip', p: { 'html': true } });
data.addRow([1, 10, 8, 7, 4, 3, null, null]);
data.addRow([2, 8, 7, 6, 3, 1, null, null]);
data.addRow([3, 11, 9, 7, 5, 2, null, null]);
data.addRow([4, 12, 8, 6.5, 4, 2, null, null]);
data.addRow([5, 10, 9, 8, 2, 1, null, null]);
data.addRow([1.5, null, null, null, null, null, 8, '<b style=color:red>tooltip</b>']);
data.addRow([2.7, null, null, null, null, null, 3, '<b style=color:green>tooltip</b>']);
data.addRow([5.2, null, null, null, null, null, 2, '<b style=color:blue>tooltip</b>']);
var options = {
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
},
crosshair: {
color: '#330066',
trigger: 'selection'
},
tooltip: {
isHtml: true,
},
colors: ['#ff2727', '#ffcc00', '#2c962c', '#ffcc00', '#ff2727', '#000000'],
series: {
5: {
lineWidth: 1,
pointSize: 4,
visibleInLegend: false,
enableInteractivity: true
}
},
// enableInteractivity: false,
pointSize: 0,
lineWidth: 1,
};
var chart = new window.google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" value="Draw Chart" onclick="DrawChart()"/>
<div id="chart_div"></div>
我正在使用谷歌折线图,选项如下:
var options = {
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
keepInBounds: true,
},
crosshair: {
color: '#330066',
trigger: 'selection'
},
tooltip: {
isHtml: true,
},
series = {
7: {
lineWidth: 1,
pointSize: 3,
visibleInLegend: false,
}
},
pointSize: 0,
lineWidth: 1,
};
我试图从特定系列中删除自动工具提示,我看到了从谷歌可视化饼图(核心图)中删除悬停工具提示的问题,但答案不适合我,我无法设置:
enableInteractivity = false
因为我不想禁用系列选择。
你能帮忙吗?
要禁用特定行或区域的工具提示,请尝试此-
Option {
series{
0: { tooltip : false}, // disable tooltip
1: { tooltip : true}, // enable tooltip
2: { tooltip : false},
3: { tooltip : true}
}
}
这对我很有效。
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- Chart.js V2折线图缺点
- 将直流图表库中的折线图缩放限制为小时
- 如何用d3.js绘制折线图
- 部分填充区域的折线图
- 将时间缩放添加到折线图(Chart.js)
- Chart.js折线图的0线型
- d3绘制动画折线图的基本示例
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- 如何在折线图中显示最近的值
- charts js更改折线图轴的字体大小/颜色和背景线
- 从特定系列的谷歌可视化折线图中删除悬停工具提示
- D3折线图鼠标悬停坐标效果
- 以角度nvd3折线图显示当前时间
- 具有任意多条线的D3折线图(以及特定的数据格式)
- .exit().remove()用于删除折线图图例中的文本,但不删除矩形
- 从折线图轴中删除小数
- 删除c3折线图的填充