線形圖中點上的數據標籤

我正在使用Angular2和ng2-charts創建折線圖。但我試圖把數據標籤上點的頂部，就像在鏈接這個酒吧圖表中的數據標籤的圖像： bar chart 線形圖中點上的數據標籤

我發現chart.js plugin for data labels，但我想不出它如何使用它與ng2圖表。

你可以看到我怎麼做我的圖表中的鏈接一個簡單的例子：HTTP：// plnkr.co/edit/GcuZd5A4J6TL29vAyTua?p=preview

任何一個可以幫助我與？

2017-10-16 Daiane Mascarenhas

你可以構建一個插件來實現這個工作。我現在正在vue build中工作，但我儘可能地爲你調整了它。

模板

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

中的js插件添加

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

的js定義每個動畫後得出的數字的插件。您可能需要根據上下文傳遞要修改的圖表。

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

如果你得到這個工作讓我知道，我可以更改，使這個答案更正確。

來源

2017-10-16 16:18:05 hdifen

線形圖中點上的數據標籤

回答

相關問題