0

背景画像を Google Chart に配置する必要があります。親 div にチャートを含め、親 div の背景画像を設定することを提案するソリューションを見てきました。ただし、それを行うと、軸ラベルや凡例などが表示されるチャートの外側の領域も背景画像で覆われます。グラフ エリア自体にのみ画像が必要です。

または、chartArea.top、chartArea.left、chartArea.width、および chartArea.height を使用して、チャートの正しい場所に画像をオーバーレイできるように、チャート オプションを取得する方法はありますか?

どうもありがとう、クリス

4

2 に答える 2

1

次の方法で、チャートが描画されている場所に関する情報を取得できます。

var graph = new google.visualization.LineChart(...);
graph.draw(data, ...);
var boundingBox = graph.getChartLayoutInterface().getChartAreaBoundingBox();
var pixelsFromLeft = boundingBox.left;

この情報を使用して、正しい位置に div を描画できます。

于 2012-12-28T11:16:08.043 に答える
0

Sjoerd の回答に貢献するためだけに、完全なコードは次のようになります。

Html では、jaime がこのスタック オーバーフローの質問で提案したように:

<div id='brand_div'>
    <div id='chart_div'></div>
</div>

css では、同じ回答で示唆されているように:

#brand_div{ 
    background: url(<SOME-URL>) no-repeat;
}

JavaScript では、Sjoerd の提案を使用して:

google.charts.load("current", {packages:["corechart"]});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ['ID', 'X', 'Y', 'Temperature'],
     ['',   80,  167,      120],
     ['',   79,  136,      130],
     ['',   78,  184,      50],
     ['',   72,  278,      230],
     ['',   81,  200,      210],
     ['',   72,  170,      100],
     ['',   68,  477,      80]
   ]);

   var options = {
     colorAxis: {colors: ['yellow', 'red']},
     width: 450,
     height: 300,
     title: 'My Daily Activities',
     backgroundColor: 'none' // this is important!
   };

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

   // this two lines are the ones that do the magic
   var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox(); 
   $('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}

このコードはすべて、Google チャートのドキュメントの例と、このスタック オーバーフローの質問に対する私の回答を使用して書かれています。

于 2016-12-07T16:13:26.880 に答える