Question

谷歌api图表中的

我试图修改图表的图例。

这里我试图通过像这个ReleaseVersion一样放置一个br标签来显示图例标签，并希望在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标签或任何其他方式拆分标签文本？

Answer 1

图例标签不接受html

但你可以使用换行符 - ＆gt; \n

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

请参阅以下工作代码段...

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

＆＃13;

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%'
  });
});

＆＃13;

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

＆＃13;

打破谷歌图表传奇标签

1 个答案: