Добавьте HTML в подсказку Google Line Chart - PullRequest
Новая
       72

Добавьте HTML в подсказку Google Line Chart

1 голос
/ 18 июня 2020

Я хочу добавить строку во всплывающую подсказку линейной диаграммы Cats.

Примечание. Моя заметка идет сюда ..

Теперь, когда мы наводим курсор на диаграмму кошек, мы можно увидеть как

1 января 2020 г.

Кошки: 10, проценты: 0%

Под этой строкой я хочу добавить строку примечания ( серым цветом и уменьшенным размером шрифта, чем в других подсказках). Таким образом, всплывающая подсказка будет выглядеть так:

1 января 2020 г.

Кошки: 10, проценты: 0%

Примечание. Здесь мое примечание ..

Ниже мой код диаграммы: 

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 для этого?

Может ли кто-нибудь помочь мне в этом? Заранее спасибо.

1 Ответ

2 голосов
/ 18 июня 2020

нет стандартных параметров, которые можно использовать для добавления содержимого во всплывающую подсказку.
вместо этого вы можете использовать роль столбца всплывающей подсказки для предоставления настраиваемой всплывающей подсказки.
но это означает, что вы необходимо будет предоставить все содержание всплывающей подсказки.

роль столбца всплывающей подсказки должна быть добавлена ​​в качестве другого столбца в таблице данных.
и он должен следовать за столбцом серии, который он представляет.
здесь столбец всплывающей подсказки добавляется после столбца с кошками. 

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