1. 技术文章
  2. Add HTML to Google Line Chart tool tip

Add HTML to Google Line Chart tool tip

由 有些话、适合烂在心里 提交于 2021-01-28 14:27:19

问题


I want to add a line on tooltip of Cats line chart.

Note: My note goes here..

Now when we hover cats chart,we can see like

Jan 1, 2020

Cats:10, percent: 0%

Below this line I want to add the Note line (in grey color and reduced font-size than other tooltip). So the tooltip will look like:

Jan 1, 2020

Cats:10, percent: 0%

Note: My note goes here..

Below is my chart code:

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

function prepareChartData(){
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  title = 'My Chart';

  var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
chartArea: {
	bottom: 80
},
annotations: {
  alwaysOutside: true,
  textStyle: {
    color: 'black',
    fontSize: 11
  },
},
hAxis: {
  format: 'MMM yy',
  viewWindowMode: "explicit",
},
vAxis: {
  minValue: 0,
  viewWindowMode: "explicit",
  viewWindow: { min: 0 },
  title: ''
},
titleTextStyle: {
  color:'#3a3a3a',
  fontSize:24,
  bold:false
  // fontName: "Segoe UI"
  },
bar: {groupWidth: '95%'},
bars: 'horizontal'
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var rawData =[];

   var chart_object = { "Dec 19": {monthLabel: "Dec", chartArray:[{'date': "2019-12-31", 'total': "5", 'cats': "10 \n <b>Test</b>", 'dogs': "10"}]},"Jan 20": {monthLabel: "Jan", chartArray:[{'date': "2020-1-01", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-29", 'total': "5", 'cats': "10", 'dogs': "10"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-01", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-12", 'total': "15", 'cats': "30", 'dogs': "30"}]}};

  $.each(chart_object, function(i, chartobject) {
 	$.each(  chartobject.chartArray, function( chartIndex , chartValue ){

date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
  });
  });

  var counter = 0;
  drawChart();

  function drawChart() {
if(counter < rawData.length){
  chartData.addRow(rawData[counter]);

  // build x-axis ticks to prevent repeated labels
  var dateFormat = new google.visualization.DateFormat({
    pattern: 'yyyy-MM-dd'
  });
  var dateRange = chartData.getColumnRange(0);
  var ticks = [];
  var dateTick = dateRange.min;
  while (dateTick.getTime() <= dateRange.max.getTime()) {
    if (ticks.length === 0) {
      // format first tick
      ticks.push({
        v: dateTick,
        f: dateFormat.formatValue(dateTick)
      });
    } else {
      ticks.push(dateTick);
    }
    dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
  }
  options.hAxis.ticks = ticks;

  chart.draw(chartData, options);
  counter++;
  window.setTimeout(drawChart, 1000);
}
  }
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

How can I add html code/css styles to achieve this?

Can anyone help me to do this? Thanks in advance.


回答1:


there are no standard options you can use to add content to the tooltip.
instead, you can use the tooltip column role to provide a custom tooltip.
but this does mean you will have to provide the entire content of the tooltip.

the tooltip column role should be added as another column in the data table.
and it should follow the series column it represents.
here, the tooltip column is added after the cats column. 

  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  chartData.addColumn({role: 'tooltip', type: 'string', p: {html: true}});

if you want a custom tooltip for the dogs or total series,
you would just add another tooltip column after each. 

  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn({role: 'tooltip', type: 'string', p: {html: true}});
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn({role: 'tooltip', type: 'string', p: {html: true}});
  chartData.addColumn('number', 'Cats');
  chartData.addColumn({role: 'tooltip', type: 'string', p: {html: true}});

as you can see above, in order to have html tooltips,
the column does require a special property --> p: {html: true}

and we must also add a tooltip config option... 

tooltip: {
  isHtml: true
}

then we can build the tooltip content,
along with the rest of the data rows... 

  var tooltip = '<div class="ggl-tooltip">';
  tooltip += '<div><span>' + formatDate.formatValue(date) + '</span></div>';
  tooltip += '<div>' + chartData.getColumnLabel(3) + ': ';
  tooltip += '<span>' + catspercentageAnnotation + '</span></div>';
  tooltip += '<div>Note: My note goes here..</div></div>';

  rawData.push([date, total, {v: dogscount, f: dogsspercentageAnnotation}, {v: catscount, f: catspercentageAnnotation}, tooltip]);

and when the tooltip is shown in the chart,
we can use CSS to style the tooltip... 

.ggl-tooltip {
  border: 1px solid #e0e0e0;
  font-family: Segoe UI;
  font-size: 12pt;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip span {
  font-weight: bold;
}

.ggl-tooltip div {
  padding: 4px 4px 4px 4px;
}

see following working snippet for an example... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chartData = new google.visualization.DataTable();
  chartData.addColumn('date', 'Date');
  chartData.addColumn('number', 'Total');
  chartData.addColumn('number', 'Dogs');
  chartData.addColumn('number', 'Cats');
  chartData.addColumn({role: 'tooltip', type: 'string', p: {html: true}});
  title = 'My Chart';

  var options = {
    title: title,
    curveType: 'function',
    legend: {position: 'bottom', alignment: 'start'},
    colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
    chartArea: {
      bottom: 80
    },
    annotations: {
      alwaysOutside: true,
      textStyle: {
        color: 'black',
        fontSize: 11
      },
    },
    hAxis: {
      format: 'MMM yy',
      viewWindowMode: "explicit",
    },
    vAxis: {
      minValue: 0,
      viewWindowMode: 'explicit',
      viewWindow: { min: 0 },
      title: ''
    },
    titleTextStyle: {
      color: '#3a3a3a',
      fontSize: 24,
      bold: false
    },
    bar: {groupWidth: '95%'},
    bars: 'horizontal',

    fontName: 'Segoe UI',
    tooltip: {
      isHtml: true
    }
  };

  var chartDivId = "chart_div";
  var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM d, yyyy'
  });
  var rawData =[];

  var chart_object = { "Dec 19": {monthLabel: "Dec", chartArray:[{'date': "2019-12-31", 'total': "5", 'cats': "10 \n <b>Test</b>", 'dogs': "10"}]},"Jan 20": {monthLabel: "Jan", chartArray:[{'date': "2020-1-01", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-29", 'total': "5", 'cats': "10", 'dogs': "10"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-01", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-12", 'total': "15", 'cats': "30", 'dogs': "30"}]}};

  $.each(chart_object, function(i, chartobject) {
    $.each(chartobject.chartArray, function(chartIndex, chartValue){
      date = new Date(chartValue['date']);
      total = parseInt(chartValue['total']);
      catscount = parseInt(chartValue['cats']);
      dogscount = parseInt(chartValue['dogs']);
      catspercentage = 0;
      catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
      dogsspercentage = 0;
      dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";

      var tooltip = '<div class="ggl-tooltip">';
      tooltip += '<div><span>' + formatDate.formatValue(date) + '</span></div>';
      tooltip += '<div>' + chartData.getColumnLabel(3) + ': ';
      tooltip += '<span>' + catspercentageAnnotation + '</span></div>';
      tooltip += '<div>Note: My note goes here..</div></div>';

      rawData.push([date, total, {v: dogscount, f: dogsspercentageAnnotation}, {v: catscount, f: catspercentageAnnotation}, tooltip]);
    });
  });

  var counter = 0;
  drawChart();

  function drawChart() {
    if (counter < rawData.length) {
      chartData.addRow(rawData[counter]);
      var dateFormat = new google.visualization.DateFormat({
        pattern: 'yyyy-MM-dd'
      });
      var dateRange = chartData.getColumnRange(0);
      var ticks = [];
      var dateTick = dateRange.min;
      while (dateTick.getTime() <= dateRange.max.getTime()) {
        if (ticks.length === 0) {
          ticks.push({
            v: dateTick,
            f: dateFormat.formatValue(dateTick)
          });
        } else {
          ticks.push(dateTick);
        }
        dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
      }
      options.hAxis.ticks = ticks;

      chart.draw(chartData, options);
      counter++;
      window.setTimeout(drawChart, 1000);
    }
  }
});
.ggl-tooltip {
  border: 1px solid #e0e0e0;
  font-family: Segoe UI;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip span {
  font-weight: bold;
}

.ggl-tooltip div {
  padding: 4px 4px 4px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


来源：https://stackoverflow.com/questions/62453547/add-html-to-google-line-chart-tool-tip

标签
javascript
html
charts
google-visualization
linechart
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!