Question

当我点击谷歌图表点时，在工具提示中显示“查看样本书”。我想使用代码控制工具提示的启用和禁用属性。截至目前，启用和禁用正在使用鼠标悬停事件，但我想删除它，只需使用编程启用和禁用“查看示例块”。

首先应禁用其工作正常 enter image description here

第二个点应该启用但是当鼠标悬停在它上面时显示禁用显示为启用。我需要这个应该在我点击图表中的点时发生。 enter image description here

我的HTML代码在这里：

<html>
  <head>
    <script type="text/javascript"
          src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }"></script>

    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          legend: { position: 'bottom' },
          tooltip: { trigger: 'selection' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.setAction({
          id: 'sample',
          text: 'See sample book',
          enabled:function()
          {

            if (typeof(chart.getSelection) == 'undefined')
                return false;
            if (typeof (chart.getSelection()[0]) == 'undefined')
                return false;
            selection = chart.getSelection();
            var ans = selection[0].row;

            if(ans == 0)
            {
              return false;
            }
            else
            {
              return true;
            }
          },
          action: function() {
            selection = chart.getSelection();
            alert(selection[0].row);

            }          
        });

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Answer 1

您可以将工具提示设置为HTML，这样可以让您更好地控制其运行方式及其显示内容。要执行此操作，请在使用列和行构建图表时向图表添加工具提示列

data.addColumn({ type: 'string', role: 'annotation', 'p': { 'html': true } });

正如您所看到的，我们将工具提示信息设置为html而不是SVG，并且您要填充到工具提示中的数据应作为一行添加到图表中，与列对应。

要修改工具提示行为，您可以使用传递给图表的选项，并将isHtml添加到true

tooltip: { trigger: selection, isHtml: true }

要对您的工具提示进行其他更改，请在css中将此行添加到CSS并开始覆盖默认的CSS

div.google-visualization-tooltip { }

如何控制谷歌图表上工具提示的行为

1 个答案: