如何在google圖表工具提示中添加rowCount

Question

我正在使用google圖表在屏幕上顯示我的數據。數據使用列的一個使用匯總如下所示...

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提前。

Answer 1

有用於沒有標準的選項加入信息的提示，
你必須用自己的自定義更換整個提示...

兩件事情必須到位，使用自定義的HTML工具提示。 ..

1）必須使用下面的圖表選項...

tooltip: { 
    isHtml: true 
    } 

2）工具提示柱必須具有以下屬性...

p: {html: true} 

---

看到下面的工作片段...

聚集列是計數

然後DataView添加用於將計數列轉換爲工具提示列

但是，當使用DataView，由於某種原因，html列屬性被忽略

所以這個表時繪製，轉換DataView回DataTable，

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

這將允許該圖表以識別列屬性...

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

.tooltip { 
 
    font-size: 12pt; 
 
    padding: 8px; 
 
} 
 

 
.tooltip div { 
 
    padding: 4px; 
 
} 
 

 
.tooltip span { 
 
    font-weight: bold; 
 
}

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