Google Charts图例位置不起作用
[英]Google Charts Legend Position Not Working
问题描述
这让我疯了。 我无法让传说完全移动。 这将生成一个图表，其右侧是默认位置的图例。
我显然已将传说位置声明为“底部”，但它不起作用。 然而，这正是文档所说的。
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>
2 个解决方案
解决方案1
6 已采纳 2016-11-01 19:05:12
legend.position: ['top', 'bottom'] - 只是在材料图表上 不起作用的众多选项中的几个
有关详细列表，请参阅物料图表特征奇偶校验＃2143的跟踪问题
但是，这些选项将适用于核心图表......
core - > google.visualization.ColumnChart - using - > packages: ['corechart']
材料 - > google.charts.Bar - 使用 - > packages: ['bar']
还有一个选项可以使核心图表接近 材料的外观和感觉
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>
解决方案2
1 2016-11-01 14:50:17
{position: 'left'}在你的例子中运行正常，所以剩下的唯一选择就是不支持'bottom' 。
关于guthub的类似讨论提到它不支持其他图表类型，并且没有计划实施： https ： //github.com/google/google-visualization-issues/issues/1964
highstocks-图例位置并在多个图表的鼠标移动时刷新图例值
[英]highstocks - legend position and refresh legend values on mousemove of multiple charts
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.