谷歌可视化:堆叠列.HTML自定义工具提示的问题

Google visualization: Stack columns. Issues with HTML custom tooltips

本文关键字：自定义 工具提示 问题 HTML 可视化 谷歌      更新时间：2023-09-26

我所有的问题都与Codepen有关，我在Codepen中开发了一个堆叠柱条形图。代码如下。http://codepen.io/anon/pen/xLIuB

第1期：我可能在自定义工具提示上发现了一个错误。如您所见，对于小组（没有足够空间放置注释的组），不会应用自定义工具提示。有办法解决吗？

第2期：我不明白为什么HTML工具提示没有启用，即使我遵循了文档。https://developers.google.com/chart/interactive/docs/customizing_tooltip_content?hl=fr

第3期：正如您所看到的，单击工具提示操作是绝对不可能的，因为工具提示太远了。有什么东西可以修吗？

问题：我需要通过单击图例来隐藏/显示系列。有没有什么东西没有记录下来？我找到了这条路http://jsfiddle.net/asgallant/6gz2Q/但它有点难看。

感谢建议：我接受任何简单的谷歌图表相关代码的建议。特别是格式化，因为即使语言设置为en，我们似乎也必须格式化interger才能获得（X，XXX.X值格式）。我说得对吗？不要担心javascritp语法，当我将其集成到我的应用程序中时，它会被重写。这只是一个模拟。

google.load("visualization", "1", {packages:["corechart"], language: "en"});
google.setOnLoadCallback(drawChart);
//Input data
var data = [
    ['API Category', 'Social', 'Music', 'File Sharing', 'Storage', 'Weather'],
    ['2011', 9000, 5300, 1200, 1600,  6000 ],
    ['2012', 1005, 3400, 2600,  3600,  4009 ],
    ['2013', 6009, 2700,  2200,  1000,  1500 ]
  ];
var aggregates = ["Category", "Year"];
var metrics = ["Url count"];
function drawChart() {
  var options = {
    width: 1000,
    height: 550,
    legend: { position: 'top', maxLines: 3, textStyle: {color: 'black', fontSize: 16 } },
    isStacked: true,
    tooltip: { isHtml: true }
  };
  var dataTable = google.visualization.arrayToDataTable(data);
  //Formatters
  var intergerFormatter = new google.visualization.NumberFormat({
    groupingSymbol: ",",
    fractionDigits: 0
  });
  for(var i=0; i<data[0].length; i++){
    intergerFormatter.format(dataTable, i);
  }
  var view = new google.visualization.DataView(dataTable);
  var cols = [0];
  for(var i=1; i<data[0].length; i++){
      cols.push({
        sourceColumn: i,
        type: "number",
        label: data[0][i]
      });
      cols.push({ 
        calc: "stringify",
        sourceColumn: i,
        type: "string",
        role: "annotation"
      });
      cols.push({ 
        calc: createTooltip(i),
        /*(function(i) {
                return function(dataTable, row){
                  return "Url count" + dataTable.getValue(row, i)+"</b>";
              };
           })(i),*/
        type: "string",
        role: "tooltip",
        p: {html: true}
      });
  }
  view.setColumns(cols);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.setAction({
      id: 'increase',
      text: 'View details in explorer',
      action: function() {
        selection = chart.getSelection();
        //TODO
      }
    });
  chart.draw(view, options);
  function createTooltip(col){
    return function(dataTable, row){
      var html = "<div></div>";
      html += aggregates[0] + ": " + dataTable.getColumnLabel(col) + "'n";
      html += aggregates[1] + ": " + dataTable.getValue(row, 0) + "'n";
      html += metrics[0] + ": " + intergerFormatter.formatValue(dataTable.getValue(row, col)) + "'n";
      return html;
    };
  }
}

Andrew Gallant的答案来源

1确实是一个bug。

2是因为您错误地指定了计算列的属性。对象密钥应该是"properties"而不是"p"：

cols.push({ 
    calc: createTooltip(i),
    type: "string",
    role: "tooltip",
    properties: {html: true}
});

工具提示操作与HTML工具提示不兼容，但是，您可以在HTML本身中重新创建它们。

3，您需要将tooltip.trigger选项指定为"selection"或"both"，然后单击条形图以选择数据点。当您将鼠标从工具栏移开时，工具提示将保持原位，因此您可以单击工具提示中的内容。

API不支持通过单击图例来显示/隐藏系列；你必须用我写的黑客之类的东西来完成它。是的，它很丑陋，但它有效。

在任何给定的语言环境中，没有一个单一的标准来格式化数字（除了用于分组的字符和用于十进制分隔符的字符），因此API默认为不格式化。"#，###.##"在讲英语的地区可能很常见，但它并不比"####.##"更标准。不过，您不必用javascript处理格式；你可以在服务器端处理

建议

function createTooltip(col){
    return function(dataTable, row){
        var html = "<div></div>"; // this will create an empty div at the start of your tooltip - is that what you want?
        html += aggregates[0] + ": " + dataTable.getColumnLabel(col) + "'n";
        html += aggregates[1] + ": " + dataTable.getValue(row, 0) + "'n";
        html += metrics[0] + ": " + dataTable.getFormattedValue(row, col) + "'n"; // don't need to use a formatter here
        return html;
    };
}
相关文章：