谷歌图表 - 图例和工具提示标签

Question

谷歌图表 - 图例和工具提示标签

javascriptchartsgoogle-visualization

4

我对Google Charts和标签自定义有一个问题。

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

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

我发现系列有一个名为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"}
    }
};

- Luca De Nardi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

一种选择是使用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>