Question

这让我疯了。我无法让传说完全移动。这将生成一个图表，其右侧是默认位置的图例。

我显然已将传奇位置声明为＆＃34; bottom＆＃34;但它不起作用。然而，这正是文档所说的。

＆＃13;

google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',		35,		{v: -.1126,   f: '-11.26%'} ],
  ['Chalk',		53,		{v: -.0126,   f: '-1.26%'}  ],
  ['Hank',		84,		{v: -.0252,   f: '-2.52%'}  ],
  ['Jordan',	46, 	{v: .0688,    f: '6.88%'}   ],
  ['Bernie',	1,  	{v: 0,        f: '-'}       ],
  ['Ralph',		105,	{v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  series: {
    0: {axis: 'Quotes'},
    1: {axis: 'Percent'}
  },
  axes: {
    y: {
      Quotes: {label: 'Subdmission Count'},
      Percent: {label: '% Percent'}
    }
  },
  legend: { 
    position : 'bottom'
  }
};

var table = new google.charts.Bar(document.getElementById('table1'));

table.draw(data, options);
}

＆＃13;

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='table1'></div>
</body>

</html>

＆＃13;

Answer 1

legend.position: ['top', 'bottom'] - 只是材料图表

请参阅Tracking Issue for Material Chart Feature Parity #2143了解详情

但是，这些选项适用于核心图表...

核心 - ＆gt; google.visualization.ColumnChart - 使用 - ＆gt; packages: ['corechart']

材料 - ＆gt; google.charts.Bar - 使用 - ＆gt; packages: ['bar']

还可以选择将核心图表关闭添加到外观＆amp;感觉材料

theme: 'material'

请参阅以下使用核心图表的工作代码段...

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
  ['Smith',		35,		{v: -.1126,   f: '-11.26%'} ],
  ['Chalk',		53,		{v: -.0126,   f: '-1.26%'}  ],
  ['Hank',		84,		{v: -.0252,   f: '-2.52%'}  ],
  ['Jordan',	46, 	{v: .0688,    f: '6.88%'}   ],
  ['Bernie',	1,  	{v: 0,        f: '-'}       ],
  ['Ralph',		105,	{v: -.0548,   f: '-5.48%'}  ]
]);

var options = {
  chartArea: {
    height: '56%'
  },
  series: {
    1: {
      targetAxisIndex: 1
    }
  },
  hAxis: {
    title: 'Name'
  },
  vAxes: {
    0: {
      title: 'Submission Count'
    },
    1: {
      title: '% Percent'
    }
  },
  theme: 'material',
  legend: { 
    position : 'bottom'
  }
};

var table = new google.visualization.ColumnChart(document.getElementById('table1'));

table.draw(data, options);
}

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id='table1'></div>
</body>

</html>

Answer 2

{position: 'left'}在您的示例中运行正常，因此唯一的选择是'bottom'不支持此选项。

关于guthub的类似讨论提到它不支持另一种图表类型而不打算实施：https://github.com/google/google-visualization-issues/issues/1964

Google Charts图例位置不起作用

2 个答案: