打破谷歌图表图例标签

Question

在Google API图表中，我正在尝试修改我的图表的图例。我想通过像这样放置一个br标签ReleaseVersion
3来显示图例标签，并希望在UI中逐个显示。

Version
3

在代码中，我尝试了以下几种方式，但是没有希望。

data.addColumn('number', 'Version<br>2');
data.addColumn('number', 'Version'+document.write('<br/>')+'3');
 data.addColumn('number', 'Version'+ document.createElement("br")+' 3');

我该如何使用br标签或其他方法拆分标签文本？

- Psl

Answer 1

图例标签不支持HTML标记

但您可以使用换行字符-->\n

  data.addColumn('number', 'ReleaseVersion\n3.21.50');

请查看以下工作代码片段...

注意：可能需要调整chartArea的大小，以便为标签留出足够的空间...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'ReleaseVersion\n3.21.48');
  data.addColumn('number', 'ReleaseVersion\n3.21.49');
  data.addColumn('number', 'ReleaseVersion\n3.21.50');
  data.addRows([
    ['1', 2, 1, 3],
    ['2', 2, 1, 1],
    ['3', 1, 2, 4],
    ['4', 0, 3, 0]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 24,
      height: '100%',
      left: 48,
      right: 200,
      top: 24,
      width: '100%'
    },
    height: '100%',
    legend: {
      position: 'right'
    },
    title: 'Title',
    width: '100%'
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

- WhiteHat

---

我尝试过这个方法来更改数据标签（而不是图例标签），但它并没有起作用，整个图表都无法渲染... :-( - pgr