Google图表 - 图例和工具提示标签-Java 学习之路

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

我正在使用组合图表，请注意 that I'm only able to edit its options, as the data is built by a part of code which is unreachable for me .

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

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

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>

回复于 2024-04-28T11:34:42+08:00

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

1 回答

相关问题