谷歌折線圖 - 如何刪除網格

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> 

- 編輯 -

難道是在數據表？

這是網格的代碼：

<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不起作用

第一，你要根據release notes使用最新的庫加載
<script src="https://www.gstatic.com/charts/loader.js"></script>

...

谷歌排行榜的版本仍然可以通過jsapi加載器不再持續更新。請從現在開始使用新的gstatic loader。

的jsapi裝載機稱作是...
<script src="https://www.google.com/jsapi"></script>

下一個，爲了去除gridlines，並獲得了彎曲線
您需要使用corechart包，代替columnchart

來演示，這裏是一個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>

Answer 2

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

或

gridlines: { 
    color: 'none' 
} 

檢查這篇文章：與代碼

google visualization line chart remove horizontal grid lines