谷歌图表:无法自定义线形图的图例位置和图表区域

Google Graphs: Unable to customize legend positions and chartArea for Line Graphs

本文关键字：位置 区域 自定义 谷歌      更新时间：2023-09-26

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

[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);
}

有几个选项不能在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>

相关文章：