Как добавить индексные метки (поверх гистограмм) в Chart.js

Question

Я использую angular-chart.js(который использует Chart.js) для создания диаграмм в моем угловом приложении. Я хочу добавить значения в верхней части столбцов в гистограмме. Если расширение диаграмм по умолчанию в Chart.js является единственным способом, можете ли вы предоставить ссылочный код?

Answer 1

Вы можете использовать ответ здесь, как отобразить значения данных в Chart.js и немного изменить функцию обратного вызова, чтобы показывать значения индекса вместо значений

...
this.datasets.forEach(function (dataset) {
    dataset.bars.forEach(function (bar, i) {
        ctx.fillText(i + 1, bar.x, bar.y - 5);
    });
})
...

Обратный вызов может быть передан через параметр параметров угловой диаграммы. Вы не будете расширять тип диаграммы, поэтому вам не нужно регистрировать новую директиву в angular-chart.

---

Скрипка - http://jsfiddle.net/zkqu7tsp/

Answer 2

Это обратный вызов onAnimationComplete для параметров угловой диаграммы

onAnimationComplete: function () {
        var chart = this.chart;
        var ctx = this.chart.ctx;
                                                                     this.datasets.forEach(function (dataset) {
         dataset.bars.forEach(function (bar, i) {
         console.log(bar)
             ctx.fillText(bar.value, bar.x, bar.y - 5);
         });
     })

Надеюсь, это поможет вам..