javascript - Google Charts - 将默认内容与自定义 HTML 混合用于工具提示

Question

尝试向 Googlechart 添加一些自定义 HTML 工具提示。

我已经关注了 docs据我所知，我的自定义内容位于原始内容的中心(而不是按预期覆盖原始内容)。

有没有办法用原始值自定义工具提示 html，或者完全覆盖工具提示内容？

JSFiddle here

  [1]: 

google.charts.load('current', {'packages':['corechart', 'bar']});
 google.charts.setOnLoadCallback(drawBarChart);
                                        function drawBarChart() {

                                            var bardata = google.visualization.arrayToDataTable([
                                                ['Genre', 'Accepted', 'Pending' , {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}],
                                                ['Egg Baskets', 4325, 4324 , createCustomHTMLContent(234 , 434)],
                                                ['Cheese Wedges', 43, 434,  createCustomHTMLContent(234 , 434)],
                                                 ['Bannanasanan', 43, 434,   createCustomHTMLContent(234 , 434)]]);

                                            var view = new google.visualization.DataView(bardata);
                                  
                                            var options = {

                                                pieHole: 0.4,
                                                series: [
                                                    {color: '#b3d657', visibleInLegend: false},
                                                    {color: '#c1c2c3', visibleInLegend: false}
                                                ],

                                                legend: {
                                                    position: 'bottom',
                                                    alignment: 'left'
                                                },
                                                chartArea: {
                                                    left: 16,
                                                    top: 10,
                                                    width: '95%',
                                                    height: '80%',
                                                },
                                                isStacked: true,
                                                bar: { groupWidth: '60%' },
                                                focusTarget: 'category',
                                                tooltip: {isHtml: true},

                                            };
                                            var barChart = new google.visualization.ColumnChart(document.getElementById("container-div"));
                                            barChart.draw(view, options);
                                        }
                                        function createCustomHTMLContent(accepted, pending) {

                                            return '<div class="chart-tooltip-header container">' +
                                                    + '<div class="row">'
                                                        + '<div class="col-12">'
                                                             +'Custom Title'
                                                        + '</div>'
                                                    + '</div>'
                                                    + '<div class="row">'
                                                        + '<div class="col-6">'
                                                            + 'Suggested'
                                                        + '</div>'
                                                        + '<div class="col-6 pull-right">'
                                                              +  pending
                                                        + '</div>'
                                                    + '</div>'
                                                    + '<div class="row">'
                                                        + '<div class="col-6">'
                                                            + 'Accepted'
                                                        + '</div>'
                                                        + '<div class="col-6 pull-right">'
                                                            +  accepted
                                                        + '</div>'
                                                    + '</div>'
                                                + '</div>'
                                        }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->

    <div id="container-div" style="width: 400px; height: 400px;"></div>
   

Answer 1

以下选项导致默认和自定义工具提示混合在一起。

focusTarget: 'category'

删除上述选项将允许自定义工具提示成为唯一显示的。

但为了为两个系列显示相同的自定义工具提示，
您需要在数据表中包含两个自定义工具提示列。

请参阅以下工作片段...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBarChart);

function drawBarChart() {
  var bardata = google.visualization.arrayToDataTable([
    ['Genre', 'Accepted', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}, 'Pending', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}],
    ['Egg Baskets', 4325, createCustomHTMLContent(234, 434), 4324, createCustomHTMLContent(234, 434)],
    ['Cheese Wedges', 43, createCustomHTMLContent(234, 434), 434, createCustomHTMLContent(234, 434)],
    ['Bannanasanan', 43, createCustomHTMLContent(234, 434), 434, createCustomHTMLContent(234, 434)]
  ]);

  var view = new google.visualization.DataView(bardata);
  var options = {
    series: [
      {color: '#b3d657', visibleInLegend: false},
      {color: '#c1c2c3', visibleInLegend: false}
    ],
    legend: {
      position: 'bottom',
      alignment: 'left'
    },
    chartArea: {
      left: 16,
      top: 10,
      width: '95%',
      height: '80%',
    },
    isStacked: true,
    bar: { groupWidth: '60%' },
    tooltip: {isHtml: true},
  };
  var barChart = new google.visualization.ColumnChart(document.getElementById("container-div"));
  barChart.draw(view, options);
}

function createCustomHTMLContent(accepted, pending) {
  return '<div class="chart-tooltip-header container">' +
          + '<div class="row">'
              + '<div class="col-12">'
                   +'Custom Title'
              + '</div>'
          + '</div>'
          + '<div class="row">'
              + '<div class="col-6">'
                  + 'Suggested'
              + '</div>'
              + '<div class="col-6 pull-right">'
                    +  pending
              + '</div>'
          + '</div>'
          + '<div class="row">'
              + '<div class="col-6">'
                  + 'Accepted'
              + '</div>'
              + '<div class="col-6 pull-right">'
                  +  accepted
              + '</div>'
          + '</div>'
      + '</div>'
}

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