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

也许你找到了问题的答案。我的代码：

＆＃13;

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

＆＃13;

chart.js：设置垂直标签方向

1 个答案: