如何更改工具提示文本的属性？

Posted 2021-04-09

我是谷歌排行榜的新手，试图制作日历图表。

我用这个：

 `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);

`

它工作正常。但是当我将光标移动到2017年12月20日和2017年12月21日时，它会以非常小的文字和小尺寸显示“你好”。

当我将光标移动到其他日期时，它会更大。

我想更改此文本的高度和宽度。

如何更改此工具提示文本的属性???

答案

你可以使用html工具提示，然后使用css类来设置它们的样式

设置以下选项......

    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>

以上是关于如何更改工具提示文本的属性？的主要内容，如果未能解决你的问题，请参考以下文章

AM Charts - 更改工具提示文本的颜色

异步任务类完成后如何更改文本视图的值（在片段中）？

如果 EditText 字段中有文本，如何更改 backgroundtint 颜色？

在 xul 和 javascript 中通过按钮单击事件上的另一个工具提示文本更改工具提示文本

使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色

如何在 JavaFX 按钮上设置工具提示？