chart.js：設置垂直標簽方向

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