javascript - 谷歌图 : Unable to customize legend positions and chartArea for Line Graphs

Question

下面是我尝试自定义图表区域和图例位置的链接。但我无法做出改变。谁能指出哪里出了问题吗？

[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

有几个选项在 Material 图表中不起作用
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>