Google Charts Geochart colorAxis не показывает градиент

У меня есть приложение angularjs, и я рисую на нем диаграммы Google, используя директиву ng-google-chart. Проблема здесь в следующем: Легенда не показывает градиент

Я использую следующий код: 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);
  }`

Это прекрасно работает, когда я пытаюсь использовать скрипку, но не свое приложение. Я знаю, что это расплывчатая проблема и может быть специфичной для моего приложения. Но, тем не менее, если кто-то получает что-то из головы или сталкивался с этим раньше, было бы очень полезно, если бы вы могли чем-то поделиться. Заранее спасибо.


javascript angularjs google-visualization pygooglechart
person Sambhav Sharma    schedule 29.03.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема заключается в теге ‹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

person Gromo    schedule 25.04.2015
comment
Это решение (обратный вызов) работает для первого рендеринга, но, похоже, оно не работает, когда вы наводите курсор на свои регионы. Любая идея о том, как это исправить? - person Tiagojdferreira; 29.04.2016
comment
К сожалению, нет идей - person Gromo; 29.04.2016

arrow_upward
0
arrow_downward

У меня была аналогичная проблема, все было в порядке, но отсутствовал цветовой градиент. Проблема заключалась в том, что пакет диаграмм Google загружался неправильно. Вот как это было решено:

В начале моего .js файла был такой загрузчик:

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

Изменение его на это исправило colorAxis:

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