Google 可视化：堆叠列。 HTML 自定义工具提示的问题

Question

我所有的问题/问题都与我开发了堆积柱形图的这个 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，我们似乎也必须格式化整数才能获得（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;
    };
  }
}

Answer 1

Andrew Gallant的回答Source

1 确实似乎是一个错误。

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

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

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

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

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

在任何给定的语言环境中都没有统一的数字格式设置标准（除了用于分组的字符和用于小数点分隔符的字符之外），因此 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;
    };
}