javascript - Google Charts Geochart colorAxis 不显示渐变

标签 javascript angularjs google-visualization pygooglechart

我有一个 angularjs 应用程序,我使用 ng-google-chart 指令在其上绘制谷歌图表。这里的问题是这样的: Legend not showing gradient

我正在使用以下代码`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);
  }`

当我尝试使用 fiddle 而不是我的应用程序时,效果非常好。我知道这是一个模糊的问题,可能是我的应用程序所特有的。但如果有人从他们的脑海中得到了一些东西,或者以前经历过这种情况,如果你能分享一些东西,那将会有很大的帮助。 提前致谢。

最佳答案

问题出在 head 部分的 标签上。最简单的解决方案是将其删除。更复杂的一个 - 使用回调函数来修复图表何时准备好:

<!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 问题正在讨论 here 。请务必在调用 chart.draw

之前放置事件监听器

关于javascript - Google Charts Geochart colorAxis 不显示渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29328092/

相关文章:

javascript - 如何防止从史诗开始两次相同的调用

javascript - 使用 Jquery 将 TD 标签放入对象中?

javascript - Firefox 中的 document.body.onload

javascript - 无法在不刷新的情况下进行超过 1 次插入

r - 树形图中的颜色

javascript - 如何在简单的谷歌折线图中为不同的值范围使用不同的颜色?

javascript - 如何从被调用函数获得响应?

javascript - 使用 ui-router - 有没有办法提供 Controller 文件的路径?

angularjs - 如何获取点击次数

javascript - 在 Google Charts (Gauge) 中使用变量作为值