所以我有一个有趣的用例,需要在工作中完成,此刻我有些茫然。
我需要实现的是:我有一个带有大量X / Y点的Google Chart散点图。 X和Y由数字决定,因此X和Y轴图例自然会显示各种范围内的数字。
但是,除了显示数字,我还需要显示标签。
因此,如果我有一个范围为209009-219959的数字,则无需在X轴上显示200,000和210,000,我需要显示“ MyLabel”。
我目前找不到任何方法,并且想知道是否可以使用内置的Google Chart函数来做到这一点?
答案 0 :(得分:1)
您可以使用ticks
选项,该选项采用值或对象的数组。
使用对象符号,您可以提供值(v:
),
以及格式化后的值(f:
)。
hAxis: {
ticks: [
{v: 201000, f: 'My Label A'},
{v: 202000, f: 'My Label B'},
{v: 203000, f: 'My Label C'},
{v: 204000, f: 'My Label D'},
]
},
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter'));
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[201000, 54000],
[202000, 55000],
[203000, 56000],
[204000, 57000]
]);
var options = {
chartArea: {
bottom: 48,
height: '100%',
left: 64,
right: 48,
top: 48,
width: '100%'
},
hAxis: {
ticks: [
{v: 201000, f: 'My Label A'},
{v: 202000, f: 'My Label B'},
{v: 203000, f: 'My Label C'},
{v: 204000, f: 'My Label D'},
]
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
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 class="chart" id="chart_scatter"></div>