谷歌折线图-如何删除网格



我刚开始进入谷歌图表,从谷歌地图中可视化高程。

喜欢这里: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'
}

查看此帖子:

谷歌可视化折线图删除水平网格线

最新更新