[英]Google Charts Geochart colorAxis doesn't show gradient
我有一个angularjs应用,我使用ng-google-chart指令在上面绘制了Google图表。 这里的问题是这样的:
我正在使用以下代码`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);
}`
当我尝试拨弄小提琴而不是我的应用程序时,这效果很好。 我知道这是一个模糊的问题,可能是我的应用特有的。 但是,即使有人从脑海中得到任何东西,或者曾经有过经历,如果您可以分享一些东西,那将对您有很大的帮助。 提前致谢。
问题是头部的<base>标签。 最简单的解决方案是将其删除。 更复杂的一种-使用回调函数来修复图表准备就绪的时间:
<!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>
这个API问题在这里讨论。 确保在调用chart.draw
之前放置事件监听chart.draw
我有类似的问题,一切正常,但是缺少颜色渐变。 问题是Google图表包未正确加载。 解决方法如下:
在我的.js文件的开头,有一个加载器:
google.load("visualization", "1", {packages:["corechart", "geochart"]});
将其更改为此可修复colorAxis:
google.charts.load('current', {'packages':['geochart']});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.