툴팁 텍스트의 속성을 변경하는 방법은 무엇입니까?

Question

나는 캘린더 차트를 만들기 위해 구글 차트에 초보 다. 내가 이것을 사용하고

:

`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/12/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>