打破谷歌圖表傳奇標簽

Question

在谷歌api圖表我試圖修改我的圖表的圖例。

這里我試圖通過像這個ReleaseVersion那樣放置一個br標簽來顯示圖例標簽
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標簽或任何其他方式拆分標簽文本？

Answer 1

圖例標簽不接受html

但你可以使用換行符 - > \\n

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

請參閱以下工作代碼段...

注意：可能需要調整chartArea ，以便為標簽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>