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

`

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

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

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

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

Answer 1

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

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

    tooltip: {
      isHtml: true
    }

和列属性 - ＆gt; p: {html: true}

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

body {
  overflow: auto;
}

#tooltip_action {
  width: 1000px;
}

.tooltip {
  font-size: 24px;
  padding: 12px;
}

＆＃13;

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

＆＃13;

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

1 个答案: