Question

我正在尝试使用angular-chartjs创建条形图，我需要在每个条形图上显示数据标签

我在js中尝试过以下代码：

 $scope.pendedLineCountOption = {
                    series: ["series1", "series2"],
                    options: {
                        legend: {
                            display: false
                        },
                        showTooltips: false,
                        animation: {
                            onComplete: function () {

                                var ctx = this.chart.ctx;
                                ctx.font = this.scales.font;
                                ctx.fillStyle = this.scales.textColor
                                ctx.textAlign = "center";
                                ctx.textBaseline = "bottom";

                                this.datasets.forEach(function (dataset) {
                                    dataset.bars.forEach(function (bar) {
                                        ctx.fillText(bar.value, bar.x, bar.y - 5);
                                    });
                                })
                            }
                        },
                    },
                    data: [[10, 20, 30]], // data array
                    labels: ["one", "two", "Three"], //array
                    header: "Header"
                };

Html代码如下：

 <canvas id="pended_bar" class="chart chart-bar" chart-data="pendedLineCountOption.data" chart-labels="pendedLineCountOption.labels" chart-options="pendedLineCountOption.options" chart-series="pendedLineCountOption.series" chart-legend="true"></canvas>

上面的代码给出了数据集未定义的错误。和数据标签不可见。

请帮忙。

Answer 1

尝试以下选项：

hover: {
    animationDuration: 0
},
animation: {
    onComplete: function () {
        var ctx = this.chart.ctx;
        var metaInfo = null;
        ctx.font = '12px "Helvetica Neue", Helvetica, Arial, sans-serif';
        ctx.fillStyle = 'gray';
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        _.forEach(this.config.data.datasets, function (dataset, i) {
            metaInfo = dataset._meta[Object.keys(dataset._meta)[i]];
            _.forEach(metaInfo.data, function (bar) {
                ctx.fillText(scope.data[bar._index], bar._model.x, bar._model.y);
            });
        })
    }
},
tooltips: {
    enabled: false
}

_ - lodash库（您可以像上面的代码一样使用forEach）

我使用的是angular-chart.js

版本1.1.1

Angular-chartjs条形图上的数据标签

1 个答案: