Google Line Chart - グリッドを削除する方法

Question

グーグルマップから標高を視覚化するためにGoogle Chartに入ったばかりです。ここでは同様

：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> 

--EDIT--

それは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を調整することは、あなたは...

Googleのチャートのバージョンrelease notesに応じて最新のライブラリローダー
<script src="https://www.gstatic.com/charts/loader.js"></script>

を使用したいと思うことjsapiローダーを介して利用可能なままになっても、一貫して更新されなくなりました。新しい静的ローダーを今から使用してください。

jsapiローダは言及は、gridlinesを削除し、あなたがcorechartパッケージを使用する必要が曲面ライン
を得るために、...
<script src="https://www.google.com/jsapi"></script>

次ですcolumnchart

の代わりに、fiddle us上記の調整を使用して密接になりまし

ご覧の問題のようになり、現在のチャートのコード、（何らかの理由で、フィドルからのコードはここスニペットでは動作しません）

、チャートが表示さINGの正しく、
次の作業スニペットを参照してください...

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