javascript - Google Charts - 图例和工具提示标签

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>