Google Charts Geochart colorAxis不顯示漸變

Question

我有一個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);
  }`

當我嘗試撥弄小提琴而不是我的應用程序時，這效果很好。 我知道這是一個模糊的問題，可能是我的應用特有的。 但是，即使有人從腦海中得到任何東西，或者曾經有過經歷，如果您可以分享一些東西，那將對您有很大的幫助。 提前致謝。

Answer 1

問題是頭部的<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

Answer 2

我有類似的問題，一切正常，但是缺少顏色漸變。 問題是Google圖表包未正確加載。 解決方法如下：

在我的.js文件的開頭，有一個加載器：

google.load("visualization", "1", {packages:["corechart",  "geochart"]});

將其更改為此可修復colorAxis：

google.charts.load('current', {'packages':['geochart']});

Google Charts Geochart colorAxis不顯示漸變

問題描述

2 個解決方案

解決方案1
1 已采納 2015-04-25 15:28:55

解決方案2
0 2016-03-14 15:36:54

Google Charts Geochart colorAxis不顯示漸變

問題描述

2 個解決方案

解決方案1 1 已采納 2015-04-25 15:28:55

解決方案2 0 2016-03-14 15:36:54

解決方案1
1 已采納 2015-04-25 15:28:55

解決方案2
0 2016-03-14 15:36:54