javascript - 图表.js : set vertical Label Orientation

Question

我需要在图表条的顶部设置垂直值，

其实我可以设置水平值，但这不是我想要的结果。

我正在使用此代码在条形图顶部设置值:

  animation: {
                        duration: 1,
                        onComplete: function () {

                            if(byDetails){

                                var chartInstance = this.chart,
                                        ctx = chartInstance.ctx;
                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {

                                        ctx.fillStyle = 'black';
                                        dataset.data[index] =  parseFloat(dataset.data[index]).toFixed(2);
                                        var data = dataset.data[index];

                                        if (withPersent) {
                                            data = dataset.data[index] + "%";
                                        }


                                        var random = Math.floor(Math.random() * 16) + 5;
                                        ctx.fillText(data, bar._model.x, bar._model.y - random);


                                    });
                                });
                            }

                        }
                    }

给我这个:

如您所见，条形顶部的值是水平的，但我需要像这样更改方向:

PS:我是这样使用图表的:

var ctx = document.getElementById(chartDiv);
var myChart = new Chart(ctx, {type: 'bar',........});      

有人知道如何做到这一点吗？

Answer 1

也许您找到了问题的答案。我的代码:

animation: {
            duration: 1,
            onComplete: function () {

                if (byDetails) {

                    var chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {

                            ctx.fillStyle = 'black';
                            dataset.data[index] = parseFloat(dataset.data[index]).toFixed(2);
                            var data = dataset.data[index];

                            if (withPersent) {
                                data = dataset.data[index] + "%";
                            }

                            ctx.save();
                            var random = Math.floor(Math.random() * 16) + 5;
                            ctx.translate(bar._model.x, bar._model.y - random);
                            ctx.rotate(-0.5 * Math.PI);
                            ctx.fillText(data, 0, 0);
                            ctx.restore();
                        });
                    });
                }

            }
        }