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です。