我刚开始进入谷歌图表,从谷歌地图中可视化高程。
喜欢这里:https://developers.google.com/maps/documentation/javascript/examples/elevation-paths?hl=de
现在我遇到了一个问题,我的图表在背景中显示了一个网格,但我只想得到一条曲线。
如何在后台禁用网格?
这是我的代码:
<script>
// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});
function initMap() {
// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
var path = [
{lat: 49.210027, lng: 8.827083},
{lat: 49.210577, lng: 8.825538},
{lat: 49.210794, lng: 8.823505}];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: path[1],
mapTypeId: 'hybrid',
disableDefaultUI: true
});
// Create an ElevationService.
var elevator = new google.maps.ElevationService;
// Draw the path, using the Visualization API and the Elevation service.
displayPathElevation(path, elevator, map);
}
function displayPathElevation(path, elevator, map) {
// Display a polyline of the elevation path.
new google.maps.Polyline({
path: path,
strokeColor: 'green',
opacity: 0.4,
map: map
});
// Create a PathElevationRequest object using this array.
// Ask for 256 samples along that path.
// Initiate the path request.
elevator.getElevationAlongPath({
'path': path,
'samples': 30
}, plotElevation);
}
// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
var chartDiv = document.getElementById('elevation_chart');
if (status !== google.maps.ElevationStatus.OK) {
// Show the error code inside the chartDiv.
chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
status;
return;
}
// Create a new chart in the elevation_chart DIV.
var chart = new google.visualization.LineChart(chartDiv);
// Extract the data from which to populate the chart.
// Because the samples are equidistant, the 'Sample'
// column here does double duty as distance along the
// X axis.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < elevations.length; i++) {
data.addRow(['', elevations[i].elevation]);
}
console.log(data);
var mysettings = {
height: 150,
legend: 'none',
curveType: 'function',
backgroundColor: 'transparent',
axisFontSize: 0,
hAxis: {
gridlines: {
count: 0,
color: 'transparent'
},
scaleType: 'log',
minValue: 0,
baselineColor: 'transparent'
},
vAxis: {
gridlines: {
color: 'transparent'
},
scaleType: 'log',
minValue: 0,
baselineColor: 'transparent'
}
};
// Draw the chart using the data within its DIV.
chart.draw(data, mysettings);
}
</script>
--编辑--
它可能在DataTable中吗?
这是网格的代码:
<path d="M31.33333333333333,136L34.33333333333333,136L1953,136M31.33333333333333,118L34.33333333333333,118L1953,118M31.33333333333333,100L34.33333333333333,100L1953,100M31.33333333333333,82L34.33333333333333,82L1953,82M31.33333333333333,64L34.33333333333333,64L1953,64M31.33333333333333,46L34.33333333333333,46L1953,46M31.33333333333333,28L34.33333333333333,28L1953,28M31.33333333333333,10L34.33333333333333,10L1953,10" stroke="#000" fill="none"></path>
代码中的两个小问题,这就是调整gridlines
不起作用的原因
首先,您需要使用最新的库加载器<script src="https://www.gstatic.com/charts/loader.js"></script>
根据发布说明。。。
通过
jsapi
加载程序仍然可用的Google图表版本不再持续更新。请从现在起使用新的gstatic加载程序。
引用的jsapi
加载程序是…<script src="https://www.google.com/jsapi"></script>
接下来,为了移除gridlines
,并获得曲线您需要使用corechart
包,而不是columnchart
为了演示,这里有一个使用当前图表代码的fiddle,它应该与您现在看到的问题非常相似
(出于某种原因,fiddle中的代码在这里的片段中不起作用(
使用上述调整,图表将正确显示,
请参阅以下工作片段。。。
google.charts.load('current', {
callback: function () {
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(chartDiv);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < 10; i++) {
data.addRow(['', i * 10]);
}
var mysettings = {
height: 150,
legend: 'none',
curveType: 'function',
backgroundColor: 'transparent',
axisFontSize: 0,
hAxis: {
gridlines: {
count: 0,
color: 'transparent'
},
scaleType: 'log',
minValue: 0,
baselineColor: 'transparent'
},
vAxis: {
gridlines: {
color: 'transparent'
},
scaleType: 'log',
minValue: 0,
baselineColor: 'transparent'
}
};
chart.draw(data, mysettings);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
vAxis: {
gridlines: {
color: 'transparent'
}
}
或
gridlines: {
color: 'none'
}
查看此帖子:
谷歌可视化折线图删除水平网格线