1

GoogleのGeoChartAPIを使用して、米国の地図を生成しています。1つの値に基づいて状態を強調表示したいのですが、状態にカーソルを合わせると表示されるツールチップに各状態に関する追加情報を表示します。完成したツールチップを次のように表示します。

Nevada
Relevance: 4 ( the data driving the state highlight )
Data
More Data

マップはうまく機能し、関数を使用してツールチップに任意のテキストを追加できますが、PatternFormat()試したすべての新しい行オプションが削除または無視されます。

var formatter = new google.visualization.PatternFormat('some data\nmore data');
formatter.format(data, [0], 1);

私はこれらの新しい行オプションをすべて試し ましたが、どれも<br>機能しません：、、、、、、、、、、、、、、、<br />&#13;&#10&#x0A&#x0D\u000A\u000D\n\r\r\n%0A%0D

試すべきことや実際に機能するものについての提案はありますか？これは、他のGoogleチャートのいくつかで可能であるようです。

レンダリングされた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()
    {

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

        data.addRows([
            ['Has Distributor', 1],
            ['Sells Direct', 1]
        ]);

        var formatter = new google.visualization.PatternFormat('data <br> <br /> &#13; &#10 &#x0A &#x0D \u000A \u000D \n \r \r\n %0A %0D more data');
        formatter.format(data, [0], 1);

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

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

    };

</script>

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

3 に答える 3

1

この質問に出くわした人は、ドキュメントのチャートオプションで設定tooltip: {isHtml: true}できます

于 2016-03-18T14:19:19.403 に答える
0

私のすべての調査とテストから、GeoChart内のツールチップテキストに新しい行を追加することは現在不可能であるとほぼ確信しています。私が最終的に思いついた解決策については、この質問を参照してください。これは改行の問題を解決しませんでしたが、私のアプリケーションで機能し、他の人を助けるかもしれない方法でツールチップを再フォーマットしました。

于 2012-08-27T21:40:24.233 に答える
0

データ テーブル ロールの使用をご覧ください。簡単に言えば、役割を持つ新しい列を追加すると、tooltip表示される内容を自由にカスタマイズできます。

以前、これを折れ線グラフと縦棒グラフでうまく使用したことがありますが、折れ線グラフと縦棒グラフのグラフ ギャラリーページでは、ロールをサポートすることが明示的に言及されていますが、ジオ チャート ページではサポートされていません。これは、それらがサポートされていないという意味ではないかもしれません。文書化された機能ではないかもしれません。

于 2012-08-27T12:57:09.487 に答える