【问题标题】:Remove hover tooltip from specific series Google Visualization line chart从特定系列谷歌可视化折线图中删除悬停工具提示
【发布时间】:2016-05-03 06:05:35
【问题描述】:

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

我尝试从特定系列中删除自动工具提示, 我看到了Remove hover tooltip from Google Visualization pie chart (core chart) 的问题,但答案不适合我,我无法设置:

enableInteractivity = false

因为我不想禁用系列选择。

你能帮忙吗?

【问题讨论】:

  • 请在 jsfiddle.net 中提供您的全部代码
  • 我尝试简化我的代码,请参阅附加的 jsfiddle.net,如果我设置 enableInteractivity: false 工具提示隐藏,但系列选择操作被阻止。

标签: javascript charts google-visualization


【解决方案1】:

要禁用特定行或区域的工具提示,试试这个 -

Option {
  series{ 
          0: { tooltip : false}, // disable tooltip
          1: { tooltip : true}, // enable tooltip
          2: { tooltip : false},
          3: { tooltip : true}
      }
}

这对我有用。

【讨论】:

  • 第一,坦克为您解答,第二,您确定它适合您吗?正如我所检查的(也在我的 quary 所附的示例中),“工具提示”属性可以在“选项”级别定义一次,而不是针对每个系列。
  • 是的,它非常适合我,我在我的应用程序中使用它。动态禁用工具提示。 'options.series[indexOfLine].tooltip = false;'请参考此stackoverflow.com/questions/8223145/… 链接。
  • 抱歉链接混乱。上面评论中提供的链接不是我想分享的链接请参考这个链接stackoverflow.com/questions/22627791/…
  • 谢谢两次,但正如我在下面的链接中看到的,所有答案都使用“enableInteractivity:false”,它是效果属性,我不想使用它,因为它也禁用了系列选择选项.
  • 我将其修改为上面我的答案中提到的代码:从 tooltip: 'none' 到 tooltip:'false' 而不使用 enableInteractivity 属性。因为我也期望在您的应用程序中出现与您期望的相同的行为。
猜你喜欢
  • 2012-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多