打破谷歌圖表傳奇標籤

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>