Question

我正在使用谷歌图表在屏幕上显示我的数据。使用以下列之一汇总数据...

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

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

提前谢谢。

Answer 1

添加信息没有标准选项到工具提示，
您必须用自己的自定义工具提示替换整个工具提示...

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

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

  tooltip: {
    isHtml: true
  }

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

  p: {html: true}

请参阅以下工作代码段...

为计数

添加了一个聚合列

然后使用DataView将 count 列转换为工具提示列

但是，使用DataView时，出于某种原因会忽略html列属性

所以在绘制图表时，将DataView转换回DataTable，

 chart.draw(view.toDataTable(), ...

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

＆＃13;

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

＆＃13;

.tooltip {
  font-size: 12pt;
  padding: 8px;
}

.tooltip div {
  padding: 4px;
}

.tooltip span {
  font-weight: bold;
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

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

1 个答案: