首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在谷歌图表的工具提示中添加rowCount

如何在谷歌图表的工具提示中添加rowCount
EN

Stack Overflow用户
提问于 2017-06-22 05:32:59
回答 1查看 490关注 0票数 1

我正在使用谷歌图表显示我的数据在屏幕上。使用以下列之一对数据进行聚合.

代码语言:javascript
运行
复制
 var dataGroup = google.visualization.data.group(
             data, // data table
             [0], // group by column
             [
                 { // aggregation column
                     column: 1,
                     type: 'number',
                     aggregation: google.visualization.data.avg
                 }
             ]
         );
        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataGroup, $scope.getOptionsForChart());

现在我要做的是在工具提示中添加行计数。

THanks提前。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-22 12:30:02

在工具提示中没有添加信息的标准选项,

你必须用你自己的定制工具来代替整个工具提示..。

要使用自定义html工具提示,必须有两件事.

1)必须使用以下图表选项.

代码语言:javascript
运行
复制
  tooltip: {
    isHtml: true
  }

2)工具提示列必须具有以下属性.

代码语言:javascript
运行
复制
  p: {html: true}

看下面的工作片段..。

将为计数添加一个聚合列。

然后使用DataView将计数列转换为工具提示列。

但是,在使用DataView时,由于某种原因,将忽略html列属性。

因此,当绘制图表时,将DataView转换回DataTable

代码语言:javascript
运行
复制
 chart.draw(view.toDataTable(), ...

这将允许图表识别列属性..。

代码语言:javascript
运行
复制
google.charts.load('current', {
  callback: function () {
    var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
    var jsonData = JSON.parse(datastring);
    var chartData = [];

    // load chart data
    jsonData.PerformanceData.forEach(function (row, rowIndex) {
      // column headings
      var columns = Object.keys(row);
      if (rowIndex === 0) {
        chartData.push(columns);
      }

      // row values
      var chartRow = [];
      columns.forEach(function (column, colIndex) {
        var chartCell = row[column];
        if (colIndex > 0) {
          chartCell = parseFloat(chartCell);
        }
        chartRow.push(chartCell);
      });
      chartData.push(chartRow);
    });

    var data = google.visualization.arrayToDataTable(chartData);

    // group data
    var dataGroup = google.visualization.data.group(
      data,  // data table
      [0],   // group by column
      [
        {    // average
          column: 1,
          type: 'number',
          aggregation: google.visualization.data.avg,
          label: data.getColumnLabel(1)
        },
        {    // count
          column: 1,
          type: 'number',
          aggregation: google.visualization.data.count
        }
      ]
    );

    var view = new google.visualization.DataView(dataGroup);
    view.setColumns([0, 1, {
      type: 'string',
      role: 'tooltip',
      calc: function (dt, row) {
        return '<div class="tooltip">' +
                '<div><span>' + dt.getValue(row, 0) + '</span></div>' +
                '<div><span>' + dt.getColumnLabel(1) + ' (avg): </span>' + dt.getValue(row, 1) + '</div>' +
                '<div><span>Row Count: </span>' + dt.getValue(row, 2) + '</div>' +
               '</div>';
      },
      p: {html: true}
    }]);


    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    // use group data to draw chart
    chart.draw(view.toDataTable(), {
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});
代码语言:javascript
运行
复制
.tooltip {
  font-size: 12pt;
  padding: 8px;
}

.tooltip div {
  padding: 4px;
}

.tooltip span {
  font-weight: bold;
}
代码语言:javascript
运行
复制
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44690871

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档