打破谷歌图表传奇标签

Question

在谷歌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标签或其他方式拆分标签文本？

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>