C3 툴팁과 상호 작용 한 후 닫습니다.

Question

C3.js를 차트로 사용하는 법을 배우고 있으며, 툴팁 기능을 더 잘 커스터마이즈하고 싶습니다. 일반적으로 C3 툴팁은 데이터 위로 마우스를 가져 가면 나타납니다. Example here. 그들은 지속되지 않으며 상호 작용할 수 없습니다.

스택 오버플로 (link here)에 일부 코드가 있습니다. 타임 아웃과 CSS를 추가하여 툴팁을 유지하고 사용자가 상호 작용할 수있게하지만 나중에 툴팁을 닫는 방법을 모릅니다. 사용자가 차트 또는 툴팁의 어딘가를 클릭하거나 타임 아웃을 사용하여. 툴팁이 나타나면 차트에 영원히 남아있게하는 것이 짜증스러운 일이라고 생각합니다.

JSFiddle

내가 전화를하거나해야 거기, 오버라이드 (override) 할 수있는 기능이 있어야한다? 나는 onclick 기능을 추가하여 데이터 포인트를 클릭했을 때 무언가를 할 수는 있지만 원하는대로 할 수있는 방법을 찾지 못했습니다. 나는 onclick하는 방법을 알아 내기 위해 this link를 따라 갔다.

data: { 
    columns: [ ['data1', 40, 50, 60, 70, 80] ], 
    types: { data1: 'bar'}, 
    onclick: function(e) { alert(e.value); } 
} 

툴팁을 닫으면 어떻게 트리거 될지 잘 모르겠습니다. 툴팁과 상호 작용하는 방법과 닫히지 않는 방법을 보여주는 JSFiddle의 코드가 있습니다.

CSS :

.c3-tooltip-container { 
    background-color: #ccc; 
    border: solid 1px black; 
    padding: 20px; 
    pointer-events: auto !important; 
} 

JS :

var features = dates = defects = [ 
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10 
]; 

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30000, 20000, 10000, 40000, 15000, 250000], 
      ['data2', 100, 200, 100, 40, 150, 250] 
     ], 
    }, 
    tooltip: { 
     position: function() { 
      var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments); 
      position.top = 0; 
      return position; 
     }, 
     contents: function (data, defaultTitleFormat, defaultValueFormat, color) { 
      var $$ = this, config = $$.config, 
      titleFormat = config.tooltip_format_title || defaultTitleFormat, 
      nameFormat = config.tooltip_format_name || function (name) { return name; }, 
      valueFormat = config.tooltip_format_value || defaultValueFormat, 
      text, i, title, value; 
      text = "<div id='tooltip' class='d3-tip'>"; 
      title = dates[data[0].index]; 
      text += "<span class='info'><b><u>Date</u></b></span><br>"; 
      text += "<span class='info'>" + title + "</span><br>"; 
      text += "<span class='info'><b><u>Features</u> : </b> " + features[data[0].index] + "</span><br>"; 
      text += "<span class='info'><b><u>Enhancements</u> : </b> " + defects[data[0].index] + "</span><br>"; 
      text += "</div>"; 
      return text; 
     } 
    } 
}); 

Answer 1

당신이 때
(1) 당신이 그것을 클릭 도구 설명을 숨기려면 또는
(2) 제한 시간이 경과했습니다 01 23, 당신은/

뭔가 같이 다시 시작 타이머 정지에 대한 처리의 클릭 동작에 대한 툴팁 가시성을

타이머 스토리지를

기능을 변경

• 기능이 필요합니다

  // 1 
  window.action = function() { 
      // do something 
      // ... 
      clearTimeout(timeout); 
      hideTooltip(); 
  } 
  
  // timer storage 
  var timeout; 
  
  var chart = c3.generate({ 
      ... 
      tooltip: { 
       position: ... 
       contents: function (...) { 
        // 2 
        clearTimeout(timeout); 
        timeout = setTimeout(hideTooltip, 5000); // auto-hide after 5 seconds 
  
        ... 
        text = "<div id='tooltip' class='d3-tip' onclick='window.action()'>"; 
        ... 
        return text; 
       } 
      } 
  }); 
  
  // disable default 
  c3.chart.internal.fn.hideTooltip = function(){}; 
  
  // custom tooltip hiding 
  var hideTooltip = function() { 
      d3.select('.c3-tooltip-container').style('display', 'none'); 
  } 
  

  updated fiddle을 살펴보십시오.