프로그래밍 개폐 Chart.js 툴팁

Chart.js 2.2.1프로그래밍 개폐 Chart.js 툴팁

어떤 생각이 어떻게이 데이터 포인트 위에 마우스를 올려 때 실행되는 코드를 실행, 나는 마우스를 이동할 때 실행하는? 프로그래밍 방식으로 차트의 툴팁을 표시하거나 숨길 필요가 있습니다.

openTip(oChart, datasetIndex, pointIndex){ 
    // how to open a specific tooltip? 
} 
closeTip(oChart, datasetIndex, pointIndex){ 
    // how to close the same tooltip? 
}

가능한 경우 샘플 코드를 표시 하겠지만 어디서부터 시작해야할지 모릅니다. chart method docs은 도움이되지 않았습니다.

JSFiddle

출처

2016-09-02 BeetleJuice

당신이보고 싶은 바의 툴팁의 본질적으로 보려는 바의 툴팁에 대한 mouseover 이벤트를 시뮬레이트합니다. 어떻게 데이터 세트를 교환 할 수 있는지 잘 모르겠습니다. 차트 요소에서 update 메소드를 호출해야 할 것입니다. 내일 다시 보겠습니다. 잘하면 도움이됩니다. – gautsch

@ gautsch 님이 제안에 감사드립니다. 차트의 속성 및 메서드에 직접 연결되는 솔루션을 기대했습니다. Raghav의 답을 아래에서보십시오 – BeetleJuice

아래 코드는 하나 또는 그 이상의 툴팁을 처리합니다.

function openTip(oChart,datasetIndex,pointIndex){ 
    if(window.oChart.tooltip._active == undefined) 
     window.oChart.tooltip._active = [] 
    var activeElements = window.oChart.tooltip._active; 
    var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex]; 
    for(var i = 0; i < activeElements.length; i++) { 
     if(requestedElem._index == activeElements[i]._index) 
      return; 
    } 
    activeElements.push(requestedElem); 
    //window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data; 
    window.oChart.tooltip._active = activeElements; 
    window.oChart.tooltip.update(true); 
    window.oChart.draw(); 
} 

function closeTip(oChart,datasetIndex,pointIndex){ 
    var activeElements = window.oChart.tooltip._active; 
    if(activeElements == undefined || activeElements.length == 0) 
    return; 
    var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex]; 
    for(var i = 0; i < activeElements.length; i++) { 
     if(requestedElem._index == activeElements[i]._index) { 
      activeElements.splice(i, 1); 
      break; 
     } 
    } 
    window.oChart.tooltip._active = activeElements; 
    window.oChart.tooltip.update(true); 
    window.oChart.draw(); 
}

@BeetleJuice에서 제공

완벽한 솔루션 -이 코드로하지만 바이올린에, 어쩌면 당신은 마우스 오버 이벤트를 만들 수 있고 페이지 X와 페이지 Y 좌표를 트리거 내가 솔루션에 시간이 없어 https://jsfiddle.net/ucvvvnm4/5/

출처

2016-09-02 06:32:05

나의 선량 Raghav 나는 내가 혼자서 거기에 도착할 수 있었다라고 생각하지 않는다. 엄청 고마워. 좋은 생각이라고 생각한다면,이 업데이트 된 JSFiddle을 자유롭게 https://jsfiddle.net/ucvvvnm4/5/에 추가하십시오. * * – BeetleJuice

프로그래밍 개폐 Chart.js 툴팁

답변

관련 문제