Question

我对Google图表和标签自定义有疑问。

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

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

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

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

1 个答案: