web-dev-qa-db-ja.com

Googleチャートの凡例操作

Google面グラフの使用： http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

誰かが私が自由に伝説を操作する方法を知っていますか？

ほとんど2つのうち1つが必要です。

  • 各凡例要素をどこかに自由に設定できるようにします。
  • 凡例のサイズが凡例領域の幅を超える場合、1行に表示される凡例を複数行に設定します。 （推奨）

私はiframe btw内でsvgを操作するハックを避けます。

javascriptjquerygoogle-visualization
15
fmsf

私たちが望むように伝説を操作する方法はありません。バウンティの問題：あなたは使うことができます

2つのチャート

legend : 'none'

また、色を使用して、すべての要素が同じ色になるようにします。

colors:['red','#004411']

それ以外は、残念ながらこれ以上操作することはできません:(

6
fmsf

フルコントロールの場合、オフにすることをお勧めします

legend : { position:"none"}

独自の作成完全にカスタマイズされた凡例を、HTMLを使用してチャートの外に配置します。

次に、selectイベントを使用してカスタム凡例をチャートにバインドし、カスタム凡例のクリックまたはホバー/フォーカスイベント（必要なものは何でも）と組み合わせます。

まずは https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events をご覧ください。

16
MemeDeveloper

凡例をカスタマイズするには、次のコードを操作するだけです。

var options = {
    title: '',
    pieHole: 0.4,
    colors: ['#0590FB', '#1DE6A2', '#FEB11C', '#FF4863', '#5A479C'],
    legend : { position:"right", alignment:"center"},
    chartArea: { 
        left: 10, 
        top: 10, 
        width: '130%', 
        height: '65%'
    },
    tooltip: {
        trigger:'none'
    }
0
Hasib Hosen_Pikkachu

多分このようなものです（それはあなたが使うフォントに依存します、あなたはあなたのフォントの割合をフェッチする必要があります）

var my_legend = "this is my legend x";

var len_legend = my_legend.length;

var width_graph = 400;

var chars_per_line = width_graph / [REPLACE_BY_PROPORTION]

if (len_legend > chars_per_line) {

    my_legend = wordwrap(my_legend, 20, '<br/>\n');

}

AND THE WRAP Word FUNCTION（またはこのようなもの）

function wordwrap( str, width, brk, cut ) {

    brk = brk || '\n';

    width = width || 75;

    cut = cut || false;

    if (!str) { return str; }

    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');


return str.match( RegExp(regex, 'g') ).join( brk );

}

あなたのコードのために...

の値を置き換える

var chart = new google.visualization.AreaChart(document....

等

あなたの変数によって。

width = 400を使用せず、幅などを使用して...文字列。

0
Leandro

私よりも賢い解決策を探しているので、この質問を見ました。

私の現在の解決策は、凡例を含むhtml要素を見つけて、独自のカスタムhtml要素と同じように操作することです。 （ただし、ここではSVG要素を処理する必要があります）

document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");
0
maleta