折れ線グラフ内のポイントの上にデータラベル

Question

折れ線グラフを作成するには、ng2チャートでAngular2を使用しています。しかし、私はちょうど、リンク、画像上でこの棒グラフのデータラベルのように、ポイントの上にデータラベルを置くしようとしている： bar chart

私はchart.js plugin for data labels見つけましたが、私はそれを把握することはできませんng2-chartsでそれを使用する方法。

あなたは、私がリンクに私のチャートをやっているかの簡単な例を参照することができます。http：// plnkr.co/edit/GcuZd5A4J6TL29vAyTua?p=preview

いずれかがそれに私を助けることができます！

Answer 1

プラグインをビルドすると、この機能を利用できます。私はこれが現時点ではビルドビルドで作業しているが、私はできる限りあなたのためにそれを適応しようとした。

テンプレート

template: ` 
    <base-chart 
    class="chart" 
    [datasets]="datasets" 
    [labels]="labels" 
    [options]="options" 
    [chartType]="'line'" 
    [plugin]="dataLabelPlugin"> 
    </base-chart> 
` 

jsがJsと各アニメーションの後に数字で描画プラグインを定義

private options = { 
    scales: { 
    yAxes: [{ 
     ticks: { 
     beginAtZero: true 
     } 
    }] 
    } 
    plugins: [{ 
    afterDatasetsDraw: this.dataLabelPlugin 
    }] 
}; 

プラグインを追加します。コンテキストに応じて変更しているチャートを渡す必要があるかもしれません。

private dataLabelPlugin = function(chart, easing) { 
    // To only draw at the end of animation, check for easing === 1 
    const ctx = chart.ctx; 
    const fontSize = 12; 
    const fontStyle = 'normal'; 
    const fontFamily = 'open sans'; 
    const padding = 5; 

    chart.data.datasets.forEach((dataset, key) => { 
     let meta = chart.getDatasetMeta(key); 
     if (!meta.hidden) { 
      meta.data.forEach((element, index) => { 
       let position = element.tooltipPosition(); 
       // Just naively convert to string for now 
       let dataString = dataset.data[index].toString(); 

       ctx.fillStyle = '#676a6c'; 

       ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 
       // Make sure alignment settings are correct 
       ctx.textAlign = 'center'; 
       ctx.textBaseline = 'middle'; 
       ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 
      }); 
     } 
    }); 
}; 

この作業がわかったら、私はこの回答をより正確にするために変更を加えることができます。