0

Google チャートのエントリに詳細情報を追加するにはどうすればよいですか。折れ線グラフには次のものがあります。

            data.addColumn('date', 'Date');   
            data.addColumn('number', 'a name');                 
            data.addColumn('number', 'a name 2');                 
            data.addColumn('number', 'a name 3');                 

            data.addRows( [
                [new Date( 2013,  7,  1 ),1.5,null,null],
                [new Date( 2013,  6,  28 ),-1.5,null,null],
                [new Date( 2013,  6,  21 ),null,-1,null],
                [new Date( 2013,  6,  15 ),null,0,2],
                [new Date( 2013,  6,  7 ),1.5,null,null],
                [new Date( 2013,  6,  5 ),-1,null,null],
               [new Date( 2013,  6,  1 ),0.5,2,null],
            ] );

このように表示されるように、その情報をどこに追加できますか?

ここに画像の説明を入力

Google APIは私にはほとんど意味がありません!!! ツールチップを含む別の列を追加しようとしましたが、ポイントごとに情報を追加するにはどうすればよいですか。めちゃくちゃ変です！

4

2 に答える 2

2

このコードを試して、html タグを使用してツールチップのコンテンツをカスタマイズしてください。

    data.addRows([
['2010', 600, customTooltip('$600K in our first year!')],
['2011', 1500, customTooltip('Sunspot activity made this our best year ever!')],
['2012', 800, customTooltip('$800K in 2012.')],
['2013', 1000, customTooltip('$1M in sales last year.')]
]);


function customTooltip(text) { 
    return '<div style="padding:5px 5px 5px 5px;">' +
'<table id="medals_layout">' + '<tr>' +
'<td><b>' + text + '</b></td>' + '</tr>' + '</table>' + '</div>';

}

実際のサンプルがあるこのjqfaq.comを見てください。

于 2013-06-26T09:17:16.610 に答える
0

必要なことは、少なくとも 1 つのツールヒント列を導入することです。各ツールチップ列は、シリーズ列のすぐ左に適用されるため、2 番目の列の後に文字列列を挿入し、そのロールを「ツールチップ」にすると、最初のシリーズのカスタム ツールチップが表示されます (スクリーンショットから、青系のようです）。シリーズごとにツールチップ列を作成できます。これは基本的に、ポイントごとのツールチップを取得する方法です。ツールチップの仕組みを例示する jsfiddle を次に示します: http://jsfiddle.net/vD2pk/

function createData1() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});

    data.addRow([{v:1}, {v:2}, {v:'hi'}, {v:5}]);
    data.addRow([{v:2}, {v:1.5}, {v:null}, {v:10}]);
    data.addRow([{v:4}, {v:3}, {v:'nooo'}, {v:8}]);
    return data;
}

function createData2() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:8}, {v:'nooo'}]);
    return data;
}

function createData3() {
    var data = new google.visualization.DataTable();
    data.addColumn({id: 'x', label: 'X', type: 'number'});
    data.addColumn({id: 'y', label: 'Y', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});
    data.addColumn({id: 'z', label: 'Z', type: 'number'});
    data.addColumn({id: 'tt', type: 'string', role: 'tooltip'});

    data.addRow([{v:1}, {v:2}, {v:'test'}, {v:5}, {v:'hi'}]);
    data.addRow([{v:2}, {v:1.5}, {v:'test2'}, {v:10}, {v:null}]);
    data.addRow([{v:4}, {v:3}, {v:null}, {v:8}, {v:'nooo'}]);
    return data;
}

function drawChart(divId, data) {
  var chart = new google.visualization.LineChart(
      document.getElementById(divId));
  chart.draw(data, {
    width: 556, height: 347
  });
}

function drawVisualization() {
  drawChart('visualization1', createData1());
  drawChart('visualization2', createData2());
  drawChart('visualization3', createData3());
}

フィドルでは、最初の例には最初のシリーズ (青) に関するツールチップがあります。2 番目のポイントにはカスタム ツールチップがないため、デフォルトで通常のツールチップになっていることに注意してください。

2 番目の例には、2 番目のシリーズ (赤) に関するツールチップがあります。

最後に、3 番目の例では、両方にツールチップがあります。

お役に立てれば。

于 2013-06-24T18:18:06.460 に答える