从特定系列的谷歌可视化折线图中删除悬停工具提示

Remove hover tooltip from specific series Google Visualization line chart

本文关键字:折线图 删除 悬停 工具提示 可视化 谷歌 系列      更新时间:2023-09-26

     
            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}
      }
}

这对我很有效。