내가 구글의 열 및 막 대형 차트 <a href="https://developers.google.com/chart/interactive/docs/gallery/" rel="nofollow noreferrer">https://developers.google.com/chart/interactive/docs/gallery/</a></p> <p>모두 사용하고

Question

구글 차트의 제목에 작은, 사용자 정의 아이콘 및 팝업을 추가하면 한 가지를 제외하고 괜찮 : 나는 옆에 작은 "I"아이콘을 추가 할 차트의 제목 또는을 클릭하면 사용자 정의 팝업이 일부 정보와 함께 나타납니다.

의이 예제를 보자 https://developers.google.com/chart/interactive/docs/gallery/columnchart

var options = { 
    title: 'Motivation and Energy Level Throughout the Day', 

내가 원하는 "... 오늘"나는 '

제목이 끝난 후 바로 배치 할 나타납니다 I-아이콘 팝업 문서를 살펴 보았지만 아무것도 발견하지 못했습니다. 이 방법을 구현할 수 있습니까?

P.S. 아니면 비슷한 결과를 얻는 방법, 즉 i-icon을 차트의 다른 곳에 배치하는 방법이 있을까요? 그러나 전체 차트와 관련이 있어야합니다.

는

Answer 1

당신은 다음 작업 조각 다음을 참조 아이콘이

을 가리킬 때이 "툴팁"
을 보여주기 위해 CSS를 사용하는 차트

상 "정보"아이콘을 배치하는 overlay을 사용할 수 있습니다 오버레이 차트의 'ready' 이벤트 내에 배치되어

google.charts.load('current', { 
 
    packages: ['controls', 'corechart', 'table'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('timeofday', 'Time of Day'); 
 
    data.addColumn('number', 'Motivation Level'); 
 
    data.addRows([ 
 
    [{v: [8, 0, 0], f: '8 am'}, 1], 
 
    [{v: [9, 0, 0], f: '9 am'}, 2], 
 
    [{v: [10, 0, 0], f:'10 am'}, 3], 
 
    [{v: [11, 0, 0], f: '11 am'}, 4], 
 
    [{v: [12, 0, 0], f: '12 pm'}, 5], 
 
    [{v: [13, 0, 0], f: '1 pm'}, 6], 
 
    [{v: [14, 0, 0], f: '2 pm'}, 7], 
 
    [{v: [15, 0, 0], f: '3 pm'}, 8], 
 
    [{v: [16, 0, 0], f: '4 pm'}, 9], 
 
    [{v: [17, 0, 0], f: '5 pm'}, 10], 
 
    ]); 
 

 
    var options = { 
 
    hAxis: { 
 
     title: 'Time of Day', 
 
     format: 'h:mm a', 
 
     viewWindow: { 
 
     min: [7, 30, 0], 
 
     max: [17, 30, 0] 
 
     } 
 
    }, 
 
    legend: { 
 
     alignment: 'end', 
 
     position: 'bottom' 
 
    }, 
 
    title: 'Motivation and Energy Level Throughout the Day', 
 
    vAxis: { 
 
     title: 'Rating (scale of 1-10)', 
 
     ticks: [ 
 
     {v: 8.5, f: 'A'}, 
 
     {v: 4.5, f: 'B'}, 
 
     {v: 2, f: 'C'} 
 
     ] 
 
    } 
 
    }; 
 

 
    var container = document.getElementById('chart'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    var chartLayout = chart.getChartLayoutInterface(); 
 
    var chartPosition = $('#chart').position(); 
 
    var titleLeft = 24; 
 
    var titlePosition = chartLayout.getBoundingBox('title'); 
 
    $('#chart-overlay').css({ 
 
     left: (chartPosition.left + titlePosition.left - titleLeft) + 'px', 
 
     top: (chartPosition.top + titlePosition.top) + 'px' 
 
    }).removeClass('hidden'); 
 
    }); 
 

 
    chart.draw(data, options); 
 
});

.hidden { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 

 
.overlay { 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.overlay:hover .popup { 
 
    display: inline-block; 
 
} 
 

 
.popup { 
 
    background-color: #fff9c4; 
 
    border: 1px solid #ffd54f; 
 
    display: none; 
 
    padding: 6px; 
 
} 
 

 
.popup span { 
 
    font-weight: bold; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div class="hidden overlay" id="chart-overlay"> 
 
    <div> 
 
    <img alt="Information" src="http://findicons.com/files/icons/2166/oxygen/16/dialog_information.png" /> 
 
    </div> 
 
    <div class="popup"> 
 
    <div> 
 
     <span>Information:</span> 
 
    </div> 
 
    <div> 
 
     This is the information for the tooltip... 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="chart"></div>