ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-11-18 18:37:48  阅读:205  来源: 互联网

标签:charts google-visualization javascript


     
            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

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

你能帮我吗?

解决方法:

要为特定的线或区域禁用工具提示,请尝试以下操作-

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

这对我有用.

标签:charts,google-visualization,javascript
来源: https://codeday.me/bug/20191118/2030266.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有