2016-05-03 10 views
3

私は、このようなオプションGoogleの折れ線グラフを使用しています、特定のシリーズのGoogleの可視化ラインチャート

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

これは私のために働いた - これを試して、特定の行や地域のためにツールチップを無効にするには

+0

jsfiddle.netでコード全体を提供してください –

+0

enableInteractivityを設定した場合、私のコードは、添付のjsfiddle.netを参照してください。ツールチップの非表示はfalseですが、系列選択アクションはブロックされます。 –

答えて

2

+0

まず、あなたの答えのためのタンク、次に、それはあなたのために働くと確信していますか?私が調べたように(私のquaryに添付されている例でも)、 'tooltip'プロパティは各シリーズではなく、 'options'レベルで一度定義できます。 –

+0

はい、それは私のために完全に動作します、私は私のアプリでこれを使用しています。ツールチップを動的に無効にする。 'options.series [indexOfLine] .tooltip = false;'このhttp://stackoverflow.com/questions/8223145/remove-hover-tooltip-from-google-visualization-pie-chart-core-chartのリンクをご覧ください。 – goneToHappyLand

+0

リンクの混乱にごめんなさい。上記のコメントで提供されたリンクは、私が共有したいものではありません.Plsはこのリンクを参照しています。http://stackoverflow.com/questions/22627791/google-chart-line-chart-turn-off-tooltip-for-a-single-列 – goneToHappyLand

関連する問題