Google Chart：使用數據視圖顯示具有多個隱藏列值的當前列值的工具提示

Question

我是這個領域的新手，想學習更多以即興發揮。我使用 asp.net 和 oracle 使用動態數據處理谷歌圖表。

一切都很好，直到工具提示區域，在將數據從 oracle 加載到 google 數據表后，我需要從圖表區域隱藏 2 列，但在剩余的一列中顯示所有信息和值作為工具提示。

這是我正在嘗試完成的概述。 帶有隱藏列信息和值的工具提示

這里是生成圖表的代碼：

   str.Append(@"<script type=text/javascript>google.charts.load( *current*, { callback: function(){ 

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'External System');
    data.addColumn('number', 'Data Completeness(%)');");

    if (dt.Rows.Count == 0)
        {
            str.Append(@"data.addColumn({ type: 'string', role: 'annotation'});
               data.addRows([['', 0, 'No Data To Display For This Month']]);
                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
                    chart.draw(data, { height: 530, width: 1300, colors:['#bc001f'] , annotations: { stem: { color: 'transparent', length: 180 }, textStyle: { color: '#000000', fontSize: 19, bold: true}}, bar: {groupWidth: '95%'}, legend: { textStyle: { fontSize: 15, bold:true}},  hAxis: {title: 'External Systems', titleTextStyle: {color: '#b20c0c',fontSize: 23,bold:true}, textStyle: { fontSize: 15, bold:true, color: '#000000',}}, vAxis: { viewWindow: { min: 0, max: 30}, textStyle: { fontSize: 15, bold:true, color: '#000000',}},backgroundColor: 'transparent'});");

        }

        else
        {
            str.Append(@"data.addColumn('number', 'Asset Count ');
                         data.addColumn('number', 'Asset Count ');");
            str.Append("data.addRows(" + dt.Rows.Count + ");");


            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {

                str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["EXT_SYSTEM_NAME"].ToString() + "');");
                str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["DB_COMPLETENESS"].ToString() + ") ;");
                str.Append("data.setValue( " + i + "," + 2 + "," + "'" + dt.Rows[i]["TOTAL_ASSET_COUNT"].ToString() + "');");
                str.Append("data.setValue( " + i + "," + 3 + "," + "'" + dt.Rows[i]["AVAILABLE_IN_GIS"].ToString() + "');");


            }


            str.Append("var formatter = new google.visualization.NumberFormat({suffix:'%'});");
            str.Append("formatter.format(data, 1);");
            str.Append("var view = new google.visualization.DataView(data);");
            str.Append("view.setColumns([0, 1,{ role: 'annotation',type: 'string',calc: 'stringify',  sourceColumn: 1}]); ");

            str.Append(@"var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

            var options = {width: 1300, height: 530, chartArea: { top: 75}, colors:['#bc001f', '#ff8a16', '#3650af'] , focusTarget: 'category', animation: { startup: true, duration: 2200, easing: 'linear'} ,backgroundColor: 'transparent', legend: { alignment: 'center', textStyle: { fontSize: 15, bold:true}}, annotations: { stem: { color: 'transparent'}, alwaysOutside: true, 
textStyle: {
  fontName: 'Times-Roman',
  fontSize: 18,
  bold: true,
  color: '#000000',


        }
        },
        hAxis: { title: 'Type of External', titleTextStyle: {color: '#7324c1',fontSize: 25,bold:true}, textStyle: { fontSize: 15, bold:true, color: '#000000',}},
        vAxis: { title: 'Completeness(%)', titleTextStyle: {color: '#7324c1',fontSize: 25,bold:true}, textStyle: { fontSize: 15, bold:true, color: '#000000',}}

        };


        chart.draw(view, options); ");
        }
   str.Append("},packages: ['corechart']});");





        str.Append("</script>");

我正在使用 Dataview 顯示第 0 列和第 1 列，同時隱藏第 2 列和第 3 列，但我想在第 1 列工具提示中動態顯示第 2 列和第 3 列的信息以及第 1 列。我不知道如何實現。

你能幫我一把嗎？謝謝！

Answer 1

添加工具提示列類似於添加您已有的注釋列

annotation --> {role: 'annotation', type: 'string', calc: 'stringify', sourceColumn: 1}

但是你可以提供你自己的calc函數，而不是'stringify'
（此處不需要sourceColumn ）

dataView.setColumns([0, 1, {
  calc: buildTooltip,
  p: {html: true},
  role: 'tooltip',
  type: 'string'
}]);

您定義的函數將接收數據表和行索引的參數，
您可以使用它來提取任何列的值...

function buildTooltip(dt, row) {
  var tooltip = '<div class="ggl-tooltip"><div><span>';
  tooltip += dt.getFormattedValue(row, 0) + '</span></div>';
  tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;';
  tooltip += '<span>' + dt.getFormattedValue(row, 1) + '</span></div>';
  tooltip += '<div>' + dt.getColumnLabel(2) + ':&nbsp;';
  tooltip += '<span>' + dt.getFormattedValue(row, 2) + '</span></div>';
  tooltip += '<div>' + dt.getColumnLabel(3) + ':&nbsp;';
  tooltip += '<span>' + dt.getFormattedValue(row, 3) + '</span></div></div>';
  return tooltip;
}

使用自定義工具提示需要兩件事，
1) 該列必須具有 --> html: true的屬性
2) 選項應包括 --> tooltip: {isHtml: true}

一個問題，有一個bug什么的，數據視圖在繪制圖表時忽略了列屬性，所以工具提示顯示的是html標簽，而不是內容
繪制圖表時，將視圖轉換回數據表...

chart.draw(dataView.toDataTable(), options);

請參閱以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('date', 'Data'); dataTable.addColumn('number', 'Y0'); dataTable.addColumn('number', 'Y1'); dataTable.addColumn('number', 'Y2'); dataTable.addColumn('number', 'Y3'); dataTable.addColumn('number', 'Y4'); dataTable.addColumn('number', 'Y5'); dataTable.addRows([ [new Date(2017, 04, 02, 13, 01, 25, 00), 100, 100, 38.6, 100, 38.6, 89], [new Date(2017, 04, 02, 13, 32, 33, 00), 97, 92, 55.6, 100, 46.6, 89], [new Date(2017, 04, 02, 14, 00, 01, 00), 75, 89, 45.8, 88, 55.5, 89], [new Date(2017, 04, 02, 14, 35, 07, 00), 68, 75, 57.9, 99, 33.1, 89] ]); var date_formatter = new google.visualization.DateFormat({ pattern: "dd/MM/yyyy HH:mm:ss" }); date_formatter.format(dataTable, 0); var viewColumns = [0]; var dataView = new google.visualization.DataView(dataTable); dataView.setColumns([0, 1, { calc: buildTooltip, p: {html: true}, role: 'tooltip', type: 'string' }]); function buildTooltip(dt, row) { var tooltip = '<div class="ggl-tooltip"><div><span>'; tooltip += dt.getFormattedValue(row, 0) + '</span></div>'; tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;'; tooltip += '<span>' + dt.getFormattedValue(row, 1) + '</span></div>'; tooltip += '<div>' + dt.getColumnLabel(2) + ':&nbsp;'; tooltip += '<span>' + dt.getFormattedValue(row, 2) + '</span></div>'; tooltip += '<div>' + dt.getColumnLabel(3) + ':&nbsp;'; tooltip += '<span>' + dt.getFormattedValue(row, 3) + '</span></div></div>'; return tooltip; } var options = { vAxis: { title: '(%)', viewWindow: { min:0, max: 120 } }, legend: {position: 'top'}, pointSize: 8, tooltip: {isHtml: true} }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(dataView.toDataTable(), options); });

 .ggl-tooltip { background-color: #ffffff; border: 1px solid #E0E0E0; display: inline-block; font-size: 10pt; padding: 8px 8px 8px 8px; position: absolute; } .ggl-tooltip div { margin-top: 4px; } .ggl-tooltip span { font-weight: bold; }

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