꺾은 선형 차트의 점 위에 데이터 레이블

Question

ng2 차트와 함께 Angular2를 사용하여 꺾은 선형 차트를 만듭니다. 하지만 난 그냥 링크의 이미지에이 막대 차트의 데이터 레이블과 같은 지점의 상단에 데이터 레이블을 넣어려고 : bar chart

나는 chart.js plugin for data labels 발견,하지만 난 그것을 알아낼 수 없습니다 ng2 차트와 함께 사용하는 방법. HTTP :

당신은 내가 링크 내 차트를하고 있어요 방법에 대한 간단한 예를 볼 수 있습니다 // plnkr.co/edit/GcuZd5A4J6TL29vAyTua?p=preview

어느 한 날이 도와 드릴을?!

Answer 1

플러그인을 만들어이 기능을 사용할 수 있습니다. 나는이 순간에 vue 빌드 작업을하고 있지만 최대한 많이 당신을 위해 그것을 시도했습니다.

템플릿

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); 
      }); 
     } 
    }); 
}; 

이 작업을 수행하는 경우 알려 주시면이 답변을보다 정확하게 수정할 수 있습니다.