Google Charts - получение содержимого по умолчанию, смешанного с пользовательским HTML для всплывающей подсказки - PullRequest
Новая
       7

Google Charts - получение содержимого по умолчанию, смешанного с пользовательским HTML для всплывающей подсказки

0 голосов
/ 22 января 2019

Попытка добавить несколько пользовательских подсказок HTML в Googlechart.

Насколько я вижу, я следовал документам , но мой пользовательский контент помещается в центр оригинального контента (а не перезаписывает исходный контент, как ожидалось).

Есть ли способ настроить всплывающие подсказки html с исходными значениями или полностью переопределить содержимое всплывающей подсказки?

JSFiddle здесь 

  [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>

1 Ответ

0 голосов
/ 22 января 2019

следующая опция вызывает смешивание подсказок по умолчанию и пользовательских подсказок. 

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>
...