Как управлять поведением всплывающей подсказки на диаграмме google

когда я нажимаю на точку графика Google, в подсказке отображается «Просмотреть образец книги». Я хочу управлять включением и отключением свойства во всплывающей подсказке с помощью кода. Теперь активировать и отключать работу с помощью мыши над событием, но я хочу удалить это и просто включить и отключить «see sample block» с помощью программирования.Как управлять поведением всплывающей подсказки на диаграмме google

В первой точке она должна быть отключить его работает нормально 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>

источник

2015-02-13 gs11111

Вы можете установить всплывающую подсказку к HTML, это должно дать вам больше контроля, как это работает, и что он показывает. Чтобы сделать это, добавьте столбец подсказки к вашей карте, когда вы создаете таблицу со столбцами и строками

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

Как вы можете видеть, мы устанавливаем информацию подсказки быть HTML вместо SVG, и данные, которые вы хотите заполнить в свою всплывающую подсказку, должны быть добавлены в виде строки к вашей диаграмме, соответствующей столбцу.

Чтобы изменить поведение всплывающей подсказки, вы можете использовать опции вы проходите на график, и добавить isHtml к истинному

tooltip: { trigger: selection, isHtml: true }

Чтобы внести дополнительные изменения в подсказке, в CSS, вы можете добавить эту строку в ваш CSS и начать отменять значение по умолчанию css

div.google-visualization-tooltip { }

источник

2015-06-29 09:25:31 Mthokozisi

Как управлять поведением всплывающей подсказки на диаграмме google

ответ

Смежные вопросы