自定义工具提示不起作用（Google 图表）

Question

我目前正在研究谷歌图表并尝试实现自定义工具提示。它仍然显示基本的默认工具提示。

文档 - https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

链接到 JSFiddle - https://jsfiddle.net/ritesh2627/wo6kb14e/1/

这是代码：`

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawVisualization);
function createCustomHTMLContent() {
  return '<div>' +
        'Jan 2023: <strong>1234 kWh</strong>'+
      '</div>';
}
      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'sdfgadfg');
         data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  
  data.addColumn('number', '2023');
  data.addColumn('number', '2024');
         data.addRows([
          ['Jan', createCustomHTMLContent(), 165,           614.6],
          ['Feb' ,createCustomHTMLContent(),  135,           682],
          ['Mar' ,createCustomHTMLContent(),  157,           623],
          ['Apr' ,createCustomHTMLContent(),  139,           609.4],
          ['May' ,createCustomHTMLContent(),  136,          569.6],
          ['Jun' ,createCustomHTMLContent(),  165,           614.6],
          ['Aug' ,createCustomHTMLContent(),  135,           682],
          ['Sep' ,createCustomHTMLContent(),  157,           623],
          ['Oct' ,createCustomHTMLContent(),  139,           609.4],
          ['Nov' ,createCustomHTMLContent(),  136,          569.6],
          ['Dec' ,createCustomHTMLContent(),  136,          569.6],
        ]);
        
        var options = {
          vAxis: {title: 'Usage in kWh',titleTextStyle : {
                            fontName : "Oswald",
                            italic : false,
                        },},
          hAxis: {title: 'Month', titleTextStyle : {
                            fontName : "Oswald",
                            italic : false,
                        }},
          seriesType: 'bars',
          series: {0: { color: '#1f6099' },
          1: {type: 'line',pointsVisible: true, color: '#2AB673'}},
          legend: { position: 'bottom', alignment: 'center' },
          tooltip: { isHtml: true },
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
   

`

Answer 1

工具提示列需要位于您要修改工具提示的列之后。它修改了上一列的工具提示，因此将工具提示列移动到末尾，如下所示：

data.addColumn('string', 'sdfgadfg');
data.addColumn('number', '2023');
data.addColumn('number', '2024');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

data.addRows([
['Jan',  165,           614.6, createCustomHTMLContent()]
...]);

为 1 月数据点 614.6 处的折线图提供工具提示。您需要在 2023 和 2024 列之间为条形图工具提示添加另一列。

https://developers.google.com/chart/interactive/docs/roles