Палец вверх 1
Перевод
Перевод

Линейная диаграмма Google - как убрать сетку

Я только начал заходить в Google Chart, чтобы визуализировать высоту с карты Google.

Как здесь: https://developers.google.com/maps/documentation/javascript/examples/elevation-paths?hl=de

Теперь у меня проблема в том, что мой график показывает сетку на заднем плане, но я хочу получить только кривую линию.

Как отключить Grid в фоновом режиме?

Это мой код:

<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>
google-maps google-visualization
задан bschauer 29 сент. 2016 г., 15:22:05
источник

2 ответа

Решение 1
Перевод
Перевод

две небольшие проблемы с кодом, поэтому настройка gridlines не работает

во-первых , вы захотите использовать новейший загрузчик библиотеки
<script src="https://www.gstatic.com/charts/loader.js"></script>

в соответствии с примечаниями к выпуску ...

Версия Google Charts, которая остается доступной через загрузчик jsapi больше не обновляется постоянно. Пожалуйста, используйте новый gstatic loader с этого момента.

jsapi загрузчик jsapi ...
<script src="https://www.google.com/jsapi"></script>

затем , чтобы удалить линии gridlines , и получить изогнутую линию
вам нужно использовать пакет corechart вместо columnchart

чтобы продемонстрировать, вот скрипка, использующая текущий код диаграммы, который должен быть похож на проблему, которую вы видите сейчас

(по какой-то причине код из скрипки не будет работать во фрагменте здесь)

используя корректировки, указанные выше, диаграмма отображается правильно,
см. следующий рабочий фрагмент ...

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>
ответ дан WhiteHat 29 сент. 2016 г., 17:12:49
источник
Палец вверх 0
Перевод
Перевод
vAxis: {
  gridlines: {
    color: 'transparent'
  }
}

или же

gridlines: {
  color: 'none'
}

Проверьте этот пост:

график визуализации гугл удалить горизонтальные линии сетки

ответ дан noned 29 сент. 2016 г., 15:26:56
источник