Googleグラフ：凡例の位置とグラフグラフのchartAreaをカスタマイズできません

Question

以下は、chartAreaとLegendsの位置をカスタマイズしようとしているリンクです。しかし、私はその変更を行うことができません。誰がこれが間違っていたかを指摘できますか？

[http://jsfiddle.net/2H7sp/488/][1]

google.load("visualization", "1", { packages: ["corechart", "line"] }); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['November', 1000, 400], 
    ['December', 1170, 460], 
    ['January', 660, 1120], 
    ['February', 690, 1120], 
    ['March', 780, 1120], 
    ['April', 820, 1120], 
    ['May', 660, 1120], 
    ['June', 1030, 540] 
]); 

var options = { 
    title: '', 
    backgroundColor: 'none', 
    legend: { position: 'none' }, 
    hAxis: { 
     title: 'Year', 
     titleTextStyle: { 
      color: 'grey' 
     } 
    }, 
    chartArea: { 
     left: 20, 
     top: 10, 
     width: 10, 
     height: 50 
    } 
}; 

var chart = new google.charts.Line(document.getElementById('chart_div')); 
chart.draw(data, options); 
} 

Answer 1

google.charts.Line

他の人はあなたがオプションに
google.charts.Line.convertOptions
を変換しなかったが、ときにのみ動作し材質チャートに動作しないいくつかのオプションがありますここで違いを生むようです。

がコアチャートを使用することをお勧めし
google.visualization.LineChart

あなたは素晴らしいです

google.load("visualization", "1", { packages: ["corechart", "line"] }); 
 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses'], 
 
     ['November', 1000, 400], 
 
     ['December', 1170, 460], 
 
     ['January', 660, 1120], 
 
     ['February', 690, 1120], 
 
     ['March', 780, 1120], 
 
     ['April', 820, 1120], 
 
     ['May', 660, 1120], 
 
     ['June', 1030, 540] 
 
    ]); 
 

 
    var options = { 
 
     title: '', 
 
     backgroundColor: 'none', 
 
     legend: { position: 'none' }, 
 
     hAxis: { 
 
      title: 'Year', 
 
      titleTextStyle: { 
 
       color: 'grey' 
 
      } 
 
     }, 
 
     chartArea: { 
 
      left: 20, 
 
      top: 10, 
 
      width: 10, 
 
      height: 50 
 
     } 
 
    }; 
 

 
    // material 
 
    var chart = new google.charts.Line(document.getElementById('chart_div')); 
 
    chart.draw(data, google.charts.Line.convertOptions(options)); 
 

 
    // core chart 
 
    var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1')); 
 
    chart1.draw(data, options); 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<div>Material Chart</div> 
 
<div id="chart_div"></div> 
 
<div>Core Chart</div> 
 
<div id="chart_div1"></div>