Chart.js 2 - 항상 모든 툴팁을 표시하고 스타일을 지정하는 방법

Question

어떻게 할 수 있습니까? , chart.js 2?

은 지금은 여기

<canvas id="myChart1" width="960" height="400"></canvas>... 

모든 코드 https://jsfiddle.net/semenova_7oa/xLbobm5y/

했을하지만 난 당신이 이미 각 지점에 숫자를 그리기 때문에이 스타일

Answer 1

을 수행하는 방법을 모른다 , 텍스트 밑줄과 점에서 텍스트까지의 선을 그려야합니다. 기본적으로 x와 y 좌표를 계산하고 멀리 떨어지는 동일한 접근법을 사용합니다.

여기에는 사용자가 요청한 내용을 그리는 업데이트 된 기능이 있습니다 (각 줄마다 정확한 색상이 적용되어 있습니다 ...). 참고로, 이것은 here으로 설명되는 텍스트 밑줄 함수에 따라 달라집니다. 여기

Chart.plugins.register({ 
    afterDatasetsDraw: function(chartInstance, easing) { 
    // To only draw at the end of animation, check for easing === 1 
    var ctx = chartInstance.chart.ctx; 

    // for each line 
    chartInstance.data.datasets.forEach(function(dataset, i) { 
     var meta = chartInstance.getDatasetMeta(i); 
     if (!meta.hidden) { 
     meta.data.forEach(function(element, index) { 
      ctx.fillStyle = element._model.borderColor; 

      var fontSize = 19; 
      var fontStyle = 'normal'; 
      var fontFamily = 'Helvetica Neue'; 
      ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 

      // Just naively convert to string for now 
      var dataString = ""; 
      if ((index != 0) && (index != 4)) { 
      dataString = number_format(dataset.data[index].toString(), 0, ',', ' '); 
      } 

      var padding = 20; 
      var position = element.tooltipPosition(); 
      var thickness = 1; 
      position.x -= 10; 
      ctx.textAlign = 'right'; 
      ctx.textBaseline = 'middle'; 

      // draw text 
      ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 

      // underline text 
      var underlinePoint = underline(ctx, dataString, position.x, position.y - (fontSize/2) - padding, fontSize, element._model.borderColor, thickness, -5); 

      // draw line connecting text underline with point 
      ctx.beginPath(); 
      ctx.strokeStyle = element._model.borderColor; 
      ctx.lineWidth = thickness; 
      ctx.moveTo(element._model.x, element._model.y); 
      ctx.lineTo(underlinePoint.x, underlinePoint.y); 
      ctx.stroke(); 
     }); 
     } 
    }); 
    } 
}); 

는 (귀하의 질문에서 포크) 위의 접근 방식을 보여줍니다 jsfiddle이다.