要从Google的Visualization API生成的条形图中删除x轴,您可以按照以下步骤操作:
<head>
部分添加以下代码来实现:
google.charts.load
函数加载corechart
包。这将允许您创建和自定义图表。例如:google.charts.load('current', {'packages':['corechart']});
drawChart
函数,该函数将在页面上绘制条形图。在此函数中,您可以设置图表的各种选项,包括是否显示x轴。例如:function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
title: 'Company Performance',
hAxis: {
baselineColor: 'none', // 设置x轴的基线颜色为无
ticks: [] // 移除x轴的刻度线
},
legend: 'none',
bar: { groupWidth: '100%' }, // 设置条形图的宽度
height: 400 // 设置图表的高度
};
var chart = new google.visualization.BarChart(document.getElementById('barchart'));
chart.draw(data, options);
}
在上面的代码中,我们将hAxis.baselineColor
设置为none
以及将hAxis.ticks
设置为空数组[]
来隐藏x轴。
<div>
元素,该元素将包含您的条形图。例如:<div id="barchart" style="width: 100%; height: 400px;"></div>
drawChart
函数以在页面上绘制条形图。例如:google.charts.setOnLoadCallback(drawChart);
完成以上步骤后,您将获得一个没有x轴的条形图。请注意,这种方法会完全移除x轴,包括刻度线和标签。如果您需要保留x轴上的刻度线但不显示标签,可以将hAxis.ticks
设置为一个空数组,如下所示:
hAxis: {
ticks: []
}
这将仅移除x轴上的标签,同时保留刻度线。
领取专属 10元无门槛券
手把手带您无忧上云