구글 스 캐터에 맞춤 정보창을 만드십시오.

Question

Google 뿌리가 있습니다. 마우스가 원 위에있을 때 사용자 정의 문자열이 포함 된 정보 창을 열어주세요.

예 : https://developers.google.com/chart/interactive/docs/events#Event_Listeners 원을 클릭하면 맞춤 문자열이있는 정보 창이 열립니다.

감사

편집 : 문자열 "테스트 3"와 "TEST4"오른쪽에 나타날 툴팁 사용

function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('number', 'SVD1'); 
    dataTable.addColumn('number', 'SVD2'); 
    dataTable.addColumn('number', 'SVD3'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
    [2010, 600, null ,'test1'], 
    [2011, 1500, null , 'test2'], 
    [2012, null, 800, 'test3'], 
    [2013, null, 1000, 'test4'] 
    ]); 

    var options = { 
    tooltip: {isHtml: true}, 
    legend: 'none' 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
    chart.draw(dataTable, options); 
} 

:

이 코드를 사용해보십시오. ???

Answer 1

내가 그것을 발견하는 이유 "TEST1"와 ""TEST2 "가 사라 문자열! Βelow이 문제에 대한 해결책을 제공

샘플 코드 :..

function drawChart() { 
    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('number', 'SVD1'); 
    dataTable.addColumn('number', 'SVD2'); 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addColumn('number', 'SVD3'); 
    // A column for custom tooltip content 
    dataTable.addColumn({type: 'string', role: 'tooltip'}); 
    dataTable.addRows([ 
    [2010, 600, 'test1' ,null, null], 
    [2011, 1500, 'test2' ,null, null ], 
    [2012, null, null, 800, 'test3'], 
    [2013, null, null, 1000, 'test4'] 
    ]); 

    var options = { 
    tooltip: {isHtml: true}, 
    legend: 'none' 
    }; 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
    chart.draw(dataTable, options); 
}