Подтвердить что ты не робот

Могу ли я настроить текст всплывающей подсказки в диаграмме Google Geochart?

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

Этот код отлично работает, если я не включаю столбец всплывающей подсказки. Когда я это сделаю, я получаю сообщение об ошибке "Таблица несовместимых данных: Ошибка: таблица содержит больше столбцов, чем ожидалось (ожидая 2 столбца)", где отображается Geochart.

Этот вопрос касается той же проблемы, но не специально для Geochart.

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        var data = google.visualization.arrayToDataTable([
            [ 'State', 'Relevance', {type: 'string', role: 'tooltip'} ],
            [ 'Alabama', 3, 'tooltip test text' ],
            [ 'Arizona', 1, 'tooltip test text' ],
        ]);

        var options =
        {
            region:         'US',
            resolution:     'provinces',
        };

        var chart = new google.visualization.GeoChart( document.getElementById( 'chart_div' ) );
        chart.draw( data, options );

    };

</script>
4b9b3361

ОТВЕТЫ

Ответ 1

Похоже, что невозможно форматировать текст точно так, как я пытался с помощью инструмента GeoChart. Ниже приведено решение, которое я наконец придумал, и отображаемую карту:

Отображенная карта с представлением всплывающей подсказки

enter image description here

Код PHP и JavaScript

<!-- generate geo map -->
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            <?php echo $data_table; ?>
        ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          <?php echo $width; ?>,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: <?php echo $width; ?>px; height: <?php echo $height; ?>px;"></div>

Выделенный HTML

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

    google.load( 'visualization', '1', { 'packages': ['geochart'] } );
    google.setOnLoadCallback( drawRegionsMap );

    function drawRegionsMap()
    {

        // create data table
        var data = google.visualization.arrayToDataTable([
            [ 'State', 'in', 'String' ],
            [ 'Arizona', 2, 'Has Facility, Sells Direct' ],
            [ 'California', 4, 'Has Facility, Has Distributor, Sells Direct' ],
            [ 'Colorado', 1, 'Sells Direct' ],
            [ 'Florida', 1, 'Has Distributor' ],
            [ 'Georgia', 1, 'Has Distributor' ],
            [ 'Idaho', 1, 'Sells Direct' ],
            [ 'Illinois', 1, 'Has Distributor' ],
            [ 'Indiana', 1, 'Has Distributor' ],
            [ 'Iowa', 1, 'Has Distributor' ],
            [ 'Kansas', 1, 'Has Distributor' ],
            [ 'Kentucky', 1, 'Has Distributor' ],
            [ 'Louisiana', 1, 'Has Distributor' ],
            [ 'Maryland', 2, 'Has Distributor' ],
            [ 'Montana', 1, 'Sells Direct' ],
            [ 'Nevada', 2, 'Has Facility, Sells Direct' ],
            [ 'New Mexico', 2, 'Has Facility, Sells Direct' ],
            [ 'North Carolina', 1, 'Has Distributor' ],
            [ 'North Dakota', 1, 'Has Distributor' ],
            [ 'Oklahoma', 1, 'Sells Direct' ],
            [ 'Oregon', 1, 'Sells Direct' ],
            [ 'Pennsylvania', 1, 'Has Distributor' ],
            [ 'South Carolina', 1, 'Has Distributor' ],
            [ 'Tennessee', 1, 'Has Distributor' ],
            [ 'Texas', 1, 'Has Distributor' ],
            [ 'Utah', 2, 'Has Facility, Sells Direct' ],
            [ 'Washington', 1, 'Sells Direct' ],
            [ 'Wyoming', 1, 'Sells Direct' ],       ]);

        // create chart object
        var chart = new google.visualization.GeoChart(
            document.getElementById( 'chart_div' )
        );

        // defines the data for the tooltip
        var formatter = new google.visualization.PatternFormat('{0}');
        formatter.format( data, [0,1], 1 );
        var formatter = new google.visualization.PatternFormat('{2}');
        formatter.format( data, [0,1,2], 0 );

        // defines the data for the chart values
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);

        // set options for this chart
        var options =
        {
            width:          286,
            region:         'US',
            resolution:     'provinces',
            colorAxis: { colors: ['#abdfab', '#006600'] },
            legend: 'none'
        };

        // draw chart
        chart.draw( view, options );

    };

</script>

<div id="chart_div" style="width: 286px; height: 180px;"></div>

Ответ 2

Чтобы настроить всплывающую подсказку для использования html, включая новую строку/изображения, пожалуйста, проверьте этот пример: http://jsfiddle.net/SD4KA/

    google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
        ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
        ['Russia', 5, 'Hello world<br>test'],
        ['US', 20, '<img src="https://www.google.com/images/srpr/logo6w.png"/>']]);
    var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
    chart.draw(data, {
        width: 800,
        height: 600,
        tooltip: {
            isHtml: true
        }
    });
}

Так как v1.1 geochart поддерживает html для всплывающих подсказок

Ответ 3

Мне удалось включить текст, который мне нужен в всплывающей подсказке, включая значения таким образом:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Country'); // Implicit domain label col.
data.addColumn('number', 'Value'); // Implicit series 1 data col.
data.addColumn({type:'string', role:'tooltip'}); // 

data.addRows([

    [{v:"US",f:"United States of America"},1,"21% of Visits"],

    [{v:"GB",f:"United Kingdom"},2,"7% of visits"],

    [{v:"DE",f:"Germany"},3,"6% of visits"],

    [{v:"FR",f:"France"},4,"5% of visits"],

    [{v:"ES",f:"Spain"},5,"5% of visits"],

    [{v:"CA",f:"Canada"},6,"4% of visits"],

    [{v:"IT",f:"Italy"},7,"4% of visits"],

    [{v:"NL",f:"The Netherlands"},8,"4% of visits"],

    [{v:"BR",f:"Brazil"},9,"4% of visits"],

    [{v:"TR",f:"Turkey"},10,"3% of visits"],

    [{v:"IN",f:"India"},11,"3% of visits"],

    [{v:"RU",f:"Russia"},12,"3% of visits"],

    [{v:"AU",f:"Australia"},13,"2% of visits"],

]);

Таким образом, например, "Соединенные Штаты Америки" будут линией 1 всплывающей подсказки, а "21% посещений" будет второй линией. В этом формате я могу включить любой текст, который я хочу в всплывающей подсказке, в обеих строках.

Ответ 4

Есть три альтернативы, представленные в этот поток

  • Задайте форматированное значение ваших точек данных вручную (используя метод #setFormattedValue() DataTable)
  • Используйте один из formatters в столбце DataTable
  • Включить столбец ролей в столбце роли " в DataTable

Я лично использовал первый, и ваш пример должен выглядеть как

var data = google.visualization.arrayToDataTable([
    [ 'State', 'Relevance' ],
    [ 'Alabama', { v: 3, f: 'tooltip test text' } ],
    [ 'Arizona', { v: 1, f: 'tooltip test text' } ],
]);

Ответ 5

Я столкнулся с аналогичной проблемой для диаграммы рассеяния. Мне пришлось использовать arrayToDataTable, чтобы получить данные на диаграмме, а не DataTable() и addColumn(), как это было предложено в других ответах.

Чтобы заставить его работать, вы вызываете вызов arrrayToDataTable(), как вы сейчас делаете, и сохраняете данные переменной.

Затем вам нужно указать, какой столбец вы хотите рассматривать как всплывающую подсказку (и вы должны указать, какие столбцы также должны быть построены). В следующем примере столбцы 0 и 1 содержат данные графика, а столбец 2 содержит строки всплывающей подсказки.

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {sourceColumn: 2,role:'tooltip'}]);

Наконец, вы должны сделать вызов для рисования с помощью переменной вида, а не с переменной данных:

chart.draw(view, options);