我正在研究 Google 图表,但遇到了一些问题
我正在渲染一个包含超过 10 个数据的圆环图,因此当数据显示的宽度超过它时会发生什么,会显示在工具提示中,如
我不想要
我正在尝试做的事情,比如有多少个标题,让它在那里,而不是将其插入工具提示
google.charts.load('current', {
'packages': ['corechart'],
'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Outlet", "Amount"],
["S0001", 7153214],
["S0002", 1319026],
["S0003", 1497004],
["S0004", 1597004],
["S0005", 1697004],
["S0006", 1797004],
["S0007", 1897004],
["S0008", 13897004],
["S0009", 2097004],
["S0010", 1597004],
["S00011", 1698604]
]);
var options = {
pieHole: 0.6,
legend: {
position: 'right',
},
width: 'auto',
height: 'auto'
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>
我不想删除图例,我只想一次性显示它们,而不是显示在工具提示中,用户必须单击才能查看其他图例
要检查的数据
[["Outlet","Amount"],["CHEF BAKERS BROOKFIELD",738999],["CHEF BAKERS ARAKERE",106050],["CHEF BAKERS AMEENPUR",89358],["CHEF BAKERS AYYAPPA NGR",80088],["Chef Bakers Bellandur",321705],["CHEF BAKERS BRIGADE METROPOLIS",65088],["CHEF BAKERS BAGMANE CBP",145432],["CHEF BAKERS CHANDAPURA",92830],["DIVYA SREE TECHNO PARK",82946],["Chef Bakers Doddanekkundi",92590],["CHEF BAKERS SIDDAPURA",115142],["CHEF BAKERS ECITY",163745],["CHEF BAKERS VYDEHI",84367],["CHEF BAKERS HARLUR ROAD",101337],["Chef Bakers Hennur Main Road",18045],["CHEF BAKERS HSR LAYOUT",358232],["CHEF BAKERS BOTANICAL GARDEN",22256],["CHEF BAKERS KADUBEESANAHALLI",277964],["CHEF BAKERS COFFEE BOARD",164906],["Chef Bakers Kaggadasapura",73045],["Chef Bakers Koramangala",79381],["CHEF BAKERS KASAVANAHALLI",424056],["Chef Bakers Marathahalli 1",115410],["Chef bakers Marathahalli 2",105703],["Chef Bakers Mahadevapura",209014],["CHEF BAKERS BEL LAYOUT",58661],["CHEF BAKERS MG ROAD",70005],["CHEF BAKERS MANYATA TECH PARK",105590],["CHEF BAKERS NAGAWARA",47832],["CHEF BAKERS PRESTIGE SHANTHINIKETAN",135772],["CHEF BAKERS PRITECH",301201],["RGA TECH PARK",64525],["CHEF BAKERS RAMANTHAPUR",62752],["CHEF BAKERS RR NAGAR",94200],["Chef Bakers Kadugodi",353045],["CHEF BAKERS SARJAPURA ROAD",84425],["CHEF BAKERS SINGASANDRA",60735],["CHEF BAKERS SPICE GARDEN",135243],["Chef Bakers Whitefield",427212],["CHEF BAKERS YELAHANKA",293061]]
最佳答案
您可以使用选项 --> legend.maxLines
向图例添加更多行。
注意:此选项仅适用于 --> legend.position = top
请参阅以下工作片段...
google.charts.load('current', {
'packages': ['corechart'],
'language': 'hi_IN'
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Outlet", "Amount"],
["S0001", 7153214],
["S0002", 1319026],
["S0003", 1497004],
["S0004", 1597004],
["S0005", 1697004],
["S0006", 1797004],
["S0007", 1897004],
["S0008", 13897004],
["S0009", 2097004],
["S0010", 1597004],
["S00011", 1698604]
]);
var options = {
pieHole: 0.6,
legend: {
position: 'top',
maxLines: 5
},
width: 'auto',
height: 'auto'
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>
关于javascript - 如何删除谷歌图表中的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55630902/