Google Charts Geochart colorAxis不显示渐变
[英]Google Charts Geochart colorAxis doesn't show gradient
问题描述
I have an angularjs app and I plot google charts on this using the ng-google-chart directive. 
我有一个angularjs应用，我使用ng-google-chart指令在上面绘制了Google图表。 The issue here is this: 这里的问题是这样的：
I am using the following code `function drawRegionsMap() { 我正在使用以下代码`function drawRegionsMap（）{
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}`
This works perfectly fine when I try in fiddle but not my app. 当我尝试拨弄小提琴而不是我的应用程序时，这效果很好。 I know this is a vague issue and might be particular to my app. 我知道这是一个模糊的问题，可能是我的应用特有的。 But still if anyone gets anything from the top of their minds, or have experienced this before, it would be of great help if you can share something. 但是，即使有人从脑海中得到任何东西，或者曾经有过经历，如果您可以分享一些东西，那将对您有很大的帮助。 Thanks in advance. 提前致谢。
2 个解决方案
解决方案1
1 已采纳 2015-04-25 15:28:55
The problem is <base> tag in head section. 问题是头部的<base>标签。 Simpliest solution is removing it. 最简单的解决方案是将其删除。 More complex one - use callback function to fix when chart will be ready: 更复杂的一种-使用回调函数来修复图表准备就绪的时间：
<!DOCTYPE html>
<html>
<head>
<base href="/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="chart" style="height:500px;width:900px;"></div>
<script type="text/javascript">
google.load("visualization", "1", {
callback: function () {
function fixGoogleCharts(element) {
return function () {
$(element).find('svg').each(function () {
$(this).find("g").each(function () {
if ($(this).attr('clip-path')) {
if ($(this).attr('clip-path').indexOf('url(#') == -1)
return;
$(this).attr('clip-path', 'url(' + document.location + $(this).attr('clip-path').substring(4))
}
});
$(this).find("rect").each(function () {
if ($(this).attr('fill')) {
if ($(this).attr('fill').indexOf('url(#') == -1)
return;
$(this).attr('fill', 'url(' + document.location + $(this).attr('fill').substring(4))
}
});
});
};
}
var chartElement = document.getElementById('chart');
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(chartElement);
// uncomment next string to fix geochart legend gradient
//google.visualization.events.addListener(chart, 'ready', fixGoogleCharts(chartElement));
chart.draw(data, options);
},
packages: ["geochart"]
});
</script>
</body>
</html>
This API issue is discussing here . 这个API问题在这里讨论。 Be sure to put event listener before calling chart.draw 确保在调用chart.draw之前放置事件监听chart.draw
解决方案2
0 2016-03-14 15:36:54
I had similar issue, everything was ok, but color gradient was missing. 我有类似的问题，一切正常，但是缺少颜色渐变。 The problem was that google chart package was loading incorrectly. 问题是Google图表包未正确加载。 This is how it was solveded: 解决方法如下：
At the begining of my .js file there was this loader: 在我的.js文件的开头，有一个加载器：
google.load("visualization", "1", {packages:["corechart", "geochart"]});
Changing it to this fixed the colorAxis: 将其更改为此可修复colorAxis：
google.charts.load('current', {'packages':['geochart']});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.