Google Chart：使用dataview显示具有多个隐藏列值的当前列值的工具提示

Question

我是这个领域的新手，想了解更多自我即兴。我使用asp.net和oracle在动态数据的谷歌图表上工作。

在将数据从oracle加载到谷歌数据表之后，我需要将数据从图表区域隐藏2个列，然后在一个剩余列中显示所有信息和值作为工具提示，直到工具提示区域一切都很好。

以下是我想要完成的内容。 tooltip with hidden column information and value

这里是生成图表的代码：

   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列的信息。我不想＆＃39;我知道如何做到这一点。

你能帮我一把吗？谢谢！

Answer 1

添加工具提示列与添加已有的注释列类似

注释 - ＆gt; {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）该列必须具有 - ＆gt;的属性html: true
2）选项应包括 - ＆gt; tooltip: {isHtml: true}

一个问题，有一个错误或其他问题，数据视图在绘制图表时会忽略列属性，因此工具提示会显示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>