草庐IT

javascript - 谷歌图表图例位置不起作用

coder 2024-12-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);
}
<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'] -- 只是许多对 material 不起作用的选项中的几个图表

参见 Tracking Issue for Material Chart Feature Parity #2143一个广泛的列表

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

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

material --> google.charts.Bar -- 使用 --> packages: ['bar']

还有一个选项可以让核心图表接近 Material 的外观和感觉

主题:'material'

使用 core 图表查看以下工作片段...

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>

关于javascript - 谷歌图表图例位置不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40362285/

javascript谷歌39codesectionchartsgoogle-visualization

有关javascript - 谷歌图表图例位置不起作用的更多相关文章

  1. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  2. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  3. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  6. ruby - Heroku production.log 文件位置 - 2

    我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc

  7. ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2

    这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo

  8. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用？ - 2

    这段代码似乎创建了一个范围从a到z的数组，但我不明白*的作用。有人可以解释一下吗？[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

  9. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  10. ruby - 为什么这个 eval 在 Ruby 中不起作用 - 2

    你能解释一下吗？我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'a=2'第二个来源给了我这个表达式来评估:'a+3'这个有效:a=2eval'a+3'这也有效:eval'a=2;a+3'但我真正需要的是这个，但它不起作用:eval'a=2'eval'a+3'我想了解其中的区别，以及如何使最后一个选项起作用。感谢您的帮助。 最佳答案 您可以创建一个Binding，并将相同的绑定(bind)与每个eval相关联调用:1.9.3p194:008>b=binding=>#1.9.3p194:009>eva

随机推荐