ツールヒントテキストのプロパティを変更するにはどうすればよいですか？

Question

私はカレンダーチャートを作成しようとすると、Googleのグラフが初めてです。私はこれを使用しています

：

`google.charts.load('current', {'packages':['calendar']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 

    dataTable.addColumn('date' , 'date'); 
    dataTable.addColumn('number', 'num'); 
    dataTable.addColumn({ type: 'string', role:'tooltip'}); 

    dataTable.addRows([ 
     [ new Date(2017, 11, 20), 150,'Hello'], 
     [ new Date(2017, 11, 21), 130,'Hello'] 
     ]); 

    var chart = new google.visualization.Calendar(document.getElementById('tooltip_action')); 

    var options = { 
      title: "Calendar Chart", 
      colors: ['#e0440e'], 
      height: 350 
      }; 

    chart.draw(dataTable, options); 

`

それが正常に動作しています。しかし、20/20/2017と21/12/12にカーソルを移動すると、非常に小さなテキストと小さいサイズで 'Hello'が表示されます。

そして、私が他の日付にカーソルを移動すると、それはより大きく表示されます。

このテキストの高さと幅を変更したいと思います。

このツールチップのテキストのプロパティを変更するにはどうすればよいですか？

Answer 1

あなたが、その後、彼らに

のスタイルをCSSクラスを使用してHTMLのツールチップを使用することができますが、以下のオプションを設定...

tooltip: { 
     isHtml: true 
    } 

と列プロパティ - >p: {html: true}

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

次の作業スニペットを参照してください...

google.charts.load('current', { 
 
    packages: ['calendar'] 
 
}).then(function() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn('date' , 'date'); 
 
    dataTable.addColumn('number', 'num'); 
 
    dataTable.addColumn({ type: 'string', role:'tooltip', p: {html: true}}); 
 
    dataTable.addRows([ 
 
    [ new Date(2017, 11, 20), 150,'<div class="tooltip">Hello</div>'], 
 
    [ new Date(2017, 11, 21), 130,'<div class="tooltip">Hello</div>'] 
 
    ]); 
 

 
    var chart = new google.visualization.Calendar(document.getElementById('tooltip_action')); 
 

 
    var options = { 
 
    title: "Calendar Chart", 
 
    colors: ['#e0440e'], 
 
    height: 350, 
 
    tooltip: { 
 
     isHtml: true 
 
    } 
 
    }; 
 

 
    chart.draw(dataTable, options); 
 
});

body { 
 
    overflow: auto; 
 
} 
 

 
#tooltip_action { 
 
    width: 1000px; 
 
} 
 

 
.tooltip { 
 
    font-size: 24px; 
 
    padding: 12px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="tooltip_action"></div>