如何更改 google 柱形图的 xaxis 范围?
how to change the range of xaxis of google column chart?
我正在使用 google 柱形图创建柱形图,如下所示:
const chart = new google.visualization.ColumnChart(chartDiv); // Extract the data from which to populate the chart.
chart.draw(data, {
height: 300,
legend: "none",
// @ts-ignore TODO(jpoehnelt) check versions
titleY: "Elevation (Meters)",
titleX: "Distance (Miles)"
});
一个问题是 xaxis 中的值。我怎么能只显示 5 个值,例如。 1、2、3、4、5?以红色标记的 xaxes 值密集填充。如何分成5个部分?感谢您的帮助!
参见 config options --> hAxis
有很多选项可以控制轴上的标签。
将轴分成几段,
使用 gridlines.count
选项。
这允许您指定将显示多少条网格线,
以及标签的数量。
hAxis: {
gridlines: {
count: 5
}
},
请参阅以下工作片段...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
var y = 1380;
for (var i = 0; i <= 500; i++) {
data.addRow([i, (i % 2 === 0) ? y + i : y - i]);
}
var options = {
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
hAxis: {
gridlines: {
count: 5
},
slantedText: true,
slantedTextAngle: 45
},
height: '100%',
legend: {
alignment: 'start',
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
我正在使用 google 柱形图创建柱形图,如下所示:
const chart = new google.visualization.ColumnChart(chartDiv); // Extract the data from which to populate the chart.
chart.draw(data, {
height: 300,
legend: "none",
// @ts-ignore TODO(jpoehnelt) check versions
titleY: "Elevation (Meters)",
titleX: "Distance (Miles)"
});
一个问题是 xaxis 中的值。我怎么能只显示 5 个值,例如。 1、2、3、4、5?以红色标记的 xaxes 值密集填充。如何分成5个部分?感谢您的帮助!
参见 config options --> hAxis
有很多选项可以控制轴上的标签。
将轴分成几段,
使用 gridlines.count
选项。
这允许您指定将显示多少条网格线,
以及标签的数量。
hAxis: {
gridlines: {
count: 5
}
},
请参阅以下工作片段...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
var y = 1380;
for (var i = 0; i <= 500; i++) {
data.addRow([i, (i % 2 === 0) ? y + i : y - i]);
}
var options = {
chartArea: {
left: 64,
top: 48,
right: 32,
bottom: 64,
height: '100%',
width: '100%'
},
hAxis: {
gridlines: {
count: 5
},
slantedText: true,
slantedTextAngle: 45
},
height: '100%',
legend: {
alignment: 'start',
position: 'top'
},
width: '100%'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>