从 google 图表中删除列键
Remove column key from google chart
我正在使用 google 列图表。我需要更改下图中突出显示为红色圆圈的列键的方向。
所以我想达到什么目的
有没有 属性 这样我就可以改变方向,比如顶部、底部或左侧,以便它正确显示(收入),现在它显示(R...)。
如果方向无法改变,那么如何从图表中删除它
您需要的是名为 chartArea 属性
您可以控制从顶部、右侧、底部或左侧显示多少区域。
这里的图表区域只是图表的区域,不包括标签、图例或除图表本身以外的任何其他值。您可以缩小图表区域,这样label/legend就可以完全来了。
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
关于图例定位,您可以使用
更改图例位置
legend: {
position: 'left'
}
要完全删除图例,请使用
legend:{position: 'none'}
请参阅下面的代码片段或此 JSFIDDLE 了解其工作原理。
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Submitter', 'Count'],
['Service', 168],
['NAME 1', 42],
['NAME 2', 36],
['NAME 3', 35],
['NAME 4', 34],
['NAME 5', 30],
['NAME 6', 24],
['NAME 7', 21],
['NAME 8', 18]
]);
var options = {
pieSliceText: 'percentage',
legend: {
position: 'none'
},
height: '500',
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart6_div"></div>
我正在使用 google 列图表。我需要更改下图中突出显示为红色圆圈的列键的方向。
所以我想达到什么目的
有没有 属性 这样我就可以改变方向,比如顶部、底部或左侧,以便它正确显示(收入),现在它显示(R...)。
如果方向无法改变,那么如何从图表中删除它
您需要的是名为 chartArea 属性
您可以控制从顶部、右侧、底部或左侧显示多少区域。
这里的图表区域只是图表的区域,不包括标签、图例或除图表本身以外的任何其他值。您可以缩小图表区域,这样label/legend就可以完全来了。
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
关于图例定位,您可以使用
更改图例位置 legend: {
position: 'left'
}
要完全删除图例,请使用
legend:{position: 'none'}
请参阅下面的代码片段或此 JSFIDDLE 了解其工作原理。
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Submitter', 'Count'],
['Service', 168],
['NAME 1', 42],
['NAME 2', 36],
['NAME 3', 35],
['NAME 4', 34],
['NAME 5', 30],
['NAME 6', 24],
['NAME 7', 21],
['NAME 8', 18]
]);
var options = {
pieSliceText: 'percentage',
legend: {
position: 'none'
},
height: '500',
chartArea: {
height: '500',
left: 0,
right: 0,
top: 30,
bottom: 0
},
};
var chart = new google.visualization.PieChart(document.getElementById('chart6_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart6_div"></div>