2013-01-10 2 views
6

스택 막대 차트에 대한 맞춤 툴팁을 얻으려고했습니다.Google 시각화 API - 스택 막대 차트 - 맞춤 툴팁

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'Units'); 
data.addColumn('number', '1'); 
data.addColumn('number', '2'); 
data.addColumn('number', '3'); 
data.addColumn('number', '4'); 

_1 = 0.123 
_2 = 0.23 
_3 = 0.3 
_4 = 0 

data.addRow([_units, _1, _2, _3, _4,]); 

var options = { 
     isStacked: true, 
     height: 150, 
     chartArea: { height: 50 }, 
     legend: { position: 'top' }, 
}; 

bchart = new google.visualization.BarChart(bcontainer); 
bchart.draw(data, options); 

제 질문은 _1, _2, _3, _4 각각에 대한 툴팁을 만드는 방법입니다.

감사

답변

11

이는 막대 차트 문서에서

DataTable Roles에서 구글 문서에 덮여있다, 당신이해야 할 일은 here

추가 추가입니다 차트에 사용할 수있는 역할에 대해 설명 {role : tooltip}이 (가) 추가 된 데이터 열에 표시되며, 해당 열에는 툴팁에 표시 할 내용이 표시됩니다. 예를 들어

:

var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

마지막 코드는 다음과 같이 표시됩니다

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addColumn('number', 'Expenses'); 
    data.addColumn({type: 'string', role: 'tooltip'}); 
    data.addRows([ 
    ['2004', 1000, '1M$ sales in 2004', 400, '$0.4M expenses in 2004'], 
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'], 
    ['2006', 660, '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'], 
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007'] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.BarChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Yearly Coffee Consumption by Country", 
      isStacked: true, 
      width:600, height:400, 
      vAxis: {title: "Year"}, 
      hAxis: {title: "Sales"}} 
    ); 
} 

는 예 here를 참조하십시오.

+0

나는 이것을 알아 내려고 어제이 시간을 보냈다. 고맙습니다. –