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/，但它有点难看。

建议赞赏： 我对谷歌图表相关代码提出了任何建议。特别是格式化，因为它似乎我们必须格式化interger得到（X，XXX.X值格式），即使语言设置为 en 。我对吗？不要担心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 是因为您错误地指定了计算列的属性。对象键应该是＆＃34;属性＆＃34;不是＆＃34; p＆＃34;：

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

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

3 ，您需要指定tooltip.trigger选项为＆＃34; selection＆＃34;或＆＃34;两者＆＃34;，然后单击栏以选择数据点。当鼠标离开栏时，工具提示将保持不变，因此您可以点击工具提示中的内容。

API不支持通过点击图例显示/隐藏系列;你必须使用我写的黑客来完成它。是的，这很难看，但它确实有效。

在任何给定的语言环境中，没有单一的标准格式化数字（除了用于分组的字符和用于小数分隔符的内容之外），因此API默认为无格式化。＆＃34;＃，### ##＆＃34;在英语语言环境中可能很常见，但它并不比＃34; ####更为标准。##＆＃34;是。但是，您不必在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;
    };
}

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

1 个答案: