谷歌图表传奇位置不工作

Google Charts Legend Position Not Working

本文关键字：工作 位置 传奇 谷歌      更新时间：2023-09-26

我快疯了。我根本动不了传说。这将生成一个图表，图例位于其右侧的默认位置。

我显然有传奇的位置声明为"底部"，但它不工作。然而这正是医生们所说的。

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);
}
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id='table1'></div>
</body>
</html>

legend.position: ['top', 'bottom']—只是许多在材料图上不起作用的选项中的两个

查看物料图特性奇偶#2143的跟踪问题以获取详细列表

然而，这些选项将在核心图表上工作…

->核心google.visualization.ColumnChart -使用-> packages: ['corechart']

材料——> google.charts.Bar -使用-> packages: ['bar']

还有一个选项可以获得core chart close to look &材质手感

theme: 'material'

请参阅下面的工作代码片段，使用core chart代替…

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>

{position: 'left'}在您的示例中工作得很好，因此唯一的选择是不支持'bottom'。

在guthub上的类似讨论提到它不支持另一种图表类型，并且不打算实现:https://github.com/google/google-visualization-issues/issues/1964

相关文章：