Question

我刚刚开始使用谷歌图表来显示谷歌地图的高程。

喜欢这里： 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>

Answer 1

代码中的两个小问题，这就是调整gridlines无效的原因

首先，您将要使用最新的库加载器
<script src="https://www.gstatic.com/charts/loader.js"></script>

根据release notes ...

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始请使用新的gstatic装载机。

提到的jsapi装载机是......
<script src="https://www.google.com/jsapi"></script>

下一步，以便删除gridlines，并获取曲线行您需要使用corechart包，而不是columnchart

要演示，这里是使用当前图表代码的fiddle，它应该与您现在看到的问题非常相似

（出于某种原因，来自小提琴的代码在这里的代码片段中不起作用）

使用上述调整，图表正确显示，
请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Answer 2

vAxis: {
  gridlines: {
    color: 'transparent'
  }
}

或

gridlines: {
  color: 'none'
}

查看这篇文章：

google visualization line chart remove horizontal grid lines

Google Line Chart - 如何删除网格

2 个答案: