添加 HTML 到 Google 折线图工具提示

Question

我想在 Cats 折线图的工具提示上添加一条线。

Note: My note goes here..

现在当我们将鼠标悬停在猫图表上时，我们可以看到类似的东西

Jan 1, 2020

Cats:10, percent: 0%

在此行下方，我想添加注释行（灰色，字体比其他工具提示小）。所以工具提示看起来像：

Jan 1, 2020

Cats:10, percent: 0%

Note: My note goes here..

下面是我的图表代码：

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>

如何添加 html code/css 样式来实现此目的？

谁能帮我做这个？提前致谢。

Answer 1

没有可用于向工具提示添加内容的标准选项。
相反，您可以使用 tooltip column role 提供自定义工具提示。
但这确实意味着您必须提供工具提示的全部内容。

应将工具提示列角色添加为数据中的另一列 table。
它应该跟在它代表的系列列之后。
在这里，工具提示列添加在 cats 列之后。

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

如果您想要狗或整个系列的自定义工具提示，
您只需在每个之后添加另一个工具提示列。

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

正如您在上面看到的，为了获得 html 工具提示，
该列确实需要一个特殊的属性 --> p: {html: true}

我们还必须添加一个工具提示配置选项...

tooltip: {
  isHtml: true
}

然后我们可以构建工具提示内容，
以及其余数据行...

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

当工具提示显示在图表中时，
我们可以使用 CSS 来设置工具提示的样式...

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

有关示例，请参见以下工作片段...

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>

添加 HTML 到 Google 折线图工具提示

Add HTML to Google Line Chart tool tip

html

javascript

charts

linechart

google-visualization