Google 图表 - 图例和工具提示标签

Question

我有关于 Google 图表和标签自定义的问题。

我正在使用组合图表，请注意我只能编辑其选项，因为数据是由我无法访问的部分代码构建的。

我想做的是通过编辑图表选项来更改悬停时显示的图例和工具提示中的系列标签。

我发现该系列有一个名为 labelInLegend 的属性，它允许我编辑图例中显示的标签，但工具提示内的标签也没有更改。有没有办法通过更改选项或以某种方式但在绘制图表之后来实现它？

检查此Fiddle以查看问题（ORIGINAL_LABEL是原始系列名称，我想在图例和工具提示中更改为MY_LABEL）

//Series initialization: I CAN'T CHANGE THIS CODE!
google.visualization.arrayToDataTable([
     ['Month', 'ORIGINAL_LABEL']
]);

//Options initialization: I CAN MODIFY THIS CODE
var options = {
  series: {
    0:{ labelInLegend: "MY_LABEL"}
    }
};

Answer 1

一个选择是使用 DataView 添加计算列
以及更改标签的

setColumns

方法

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars'
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, r) {
      return dt.getValue(r, 1);
    },
    type: data.getColumnType(1),
    label: 'MY_LABEL'
  }]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

另一个选项包括使用 HTML 工具提示

    tooltip: {
      isHtml: true
    }

并使用

MutationObserver

查找文本并替换它

但是，由于标签的大小，工具提示的大小会偏离
可能需要进一步定制

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars',
    tooltip: {
      isHtml: true
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(chartDiv);

  var observer = new MutationObserver(function (mutations) {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('span'), function (span) {
      if (span.innerHTML.indexOf('ORIGINAL_LABEL') > -1) {
        span.innerHTML = span.innerHTML.replace('ORIGINAL_LABEL', 'MY_LABEL');
      }
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

如果您可以在 google.visualization.arrayToDataTable 之后访问变量“data”，那么您可以将此行放在“data”设置之后但创建表之前：

data.bf[1].label = 'MY_LABEL';

我通过使用 console.log 查看数据发现了这一点。