google chart API 간트차트 질문

Question

google chart API로 간트차트를 제작하려고 하는데, 차트에 생성된 row에 마우스를 올리면 API에서 자동으로 해당 row 대한 데이터를 보여줍니다.이렇게 데이터가 보여지는데, 해당 이벤트를 띄우지 않고 별도의 작업을 수행하고 싶습니다.해당 이벤트를 발생 시키지 않는 방법이 있을까요?https://developers.google.com/chart/interactive/docs/gallery/ganttchart?hl&#61;ko해당 API에서 타임라인 차트에서는var options &#61; {height: chartHeight,tooltip : {trigger : &#34;none&#34;}};이렇게tooltip : {trigger : &#34;none&#34;}해당 옵션을 적용하면 해결되는 것 같지만, 간트차트에서는 관련 옵션이 보이지 않습니다.아래는 제가 작성중인 코드입니다.google.charts.load('current', {'packages':['gantt'], 'language' : 'ko'});google.charts.setOnLoadCallback(drawChart);const drawChart &#61; async () &#61;> {var dataTable &#61; new google.visualization.DataTable();dataTable.addColumn('string', 'issueIdx');dataTable.addColumn('string', 'issueTitle');dataTable.addColumn('date', 'issueDate');dataTable.addColumn('date', 'issueDeadline');dataTable.addColumn('number', 'Duration');dataTable.addColumn('number', 'issueProgressStatus');dataTable.addColumn('string', 'subIssueIdx');let issueList &#61; await timeLineList();let rows &#61; [];for(let i &#61; 0 ; i < issueList.length ; i&#43;&#43;) {rows.push([issueList[i].issueIdx,issueList[i].issueTitle,new Date(issueList[i].issueDate[0], issueList[i].issueDate[1] - 1, issueList[i].issueDate[2]),new Date(issueList[i].issueDeadline[0], issueList[i].issueDeadline[1] - 1, issueList[i].issueDeadline[2]),null,0,issueList[i].subIssueIdx]);}dataTable.addRows(rows);var rowHeight &#61; 40; // Task 당 높이 (픽셀)var numRows &#61; dataTable.getNumberOfRows(); // 데이터 행 수var chartHeight &#61; rowHeight * numRows &#43; 80; // 차트의 높이 계산var options &#61; {height: chartHeight,tooltip : {trigger : &#34;none&#34;}};var container &#61; document.getElementById('chart_div');var chart &#61; new google.visualization.Gantt(container);chart.draw(dataTable, options);google.visualization.events.addListener(chart, 'select', function(e) {$(&#34;#btnTimeLineInsertModal&#34;).click();$(&#34;#issueProgressStatus&#34;).attr(&#34;disabled&#34;, false);// console.log(chart.getSelection());// console.log(issueList[chart.getSelection()[0].row]);let issueIdx &#61; issueList[chart.getSelection()[0].row].issueIdx;axios({url : ${baseURI}/${issueIdx},method : &#34;get&#34;,header : {&#34;Content-Type&#34; : &#34;application/json&#34;},}).then(issue &#61;> {let issueData &#61; issue.dataTable;document.querySelector(&#34;#timeLineInsert&#34;).reset();$(&#34;#issueIdxInp&#34;).val(${issueData.issueIdx});modal.querySelector(&#34;#issueTitle&#34;).value &#61; issueData.issueTitle;modal.querySelector(&#34;#issueContent&#34;).value &#61; issueData.issueContent;$(&#34;select[name&#61;issueOfficer]&#34;).val(${issueData.issueOfficer}).prop(&#34;selected&#34;, true);$(&#34;select[name&#61;issuePriorityName]&#34;).val(${issueData.issuePriorityName}).prop(&#34;selected&#34;, true);modal.querySelector(&#34;#issueTagName&#34;).value &#61; issueData.issueTags[0].issueTagName;modal.querySelector(&#34;#issueDate&#34;).valueAsDate &#61; new Date(issueData.issueDate[0], issueData.issueDate[1], issueData.issueDate[2]);modal.querySelector(&#34;#issueDeadline&#34;).valueAsDate &#61; new Date(issueData.issueDeadline[0], issueData.issueDeadline[1], issueData.issueDeadline[2])$(&#34;select[name&#61;subIssueIdx]&#34;).val(${issueData.subIssueIdx}).prop(&#34;selected&#34;, true);})});google.visualization.events.addListener(chart, 'ready', function() {});google.visualization.events.addListener(chart, 'onmouseover', function(e) {});}하단에 있는google.visualization.events.addListener(chart, 'ready', function()google.visualization.events.addListener(chart, 'onmouseover', function(e)이 이벤트에서 별도의 작업을 수행하고 싶습니다.

google chart API 간트차트 질문

0개의 답변

Q&A 목록