亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Chartjs:旋轉軸標題

Chartjs:旋轉軸標題

侃侃爾雅 2023-12-11 10:42:00
我有一個帶有兩個 y 軸的圖表,我想給它們一個可以正常工作的標題。但右側的y軸標題旋轉了180°。我想撤消此操作,但在文檔中找不到有關如何執行此操作的信息。minRotation 和 maxRotation 不起作用?,F在有人是否可以旋轉軸標題?
查看完整描述

1 回答

?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

您只能通過一種方式做到這一點。這就是你在 Chart.js 庫中所做的更改。


你應該找到這部分開頭


if (scaleLabel.display) { 在 Chart.js 中并放入


var isRight = options.position === 'right';

rotation = isRight ? -0.5 * Math.PI : rotation;

如下


            if (scaleLabel.display) {

                // Draw the scale label

                var scaleLabelX;

                var scaleLabelY;

                var rotation = 0;


                if (isHorizontal) {

                    scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width

                    scaleLabelY = options.position === 'bottom' ? me.bottom - (scaleLabelFontSize / 2) : me.top + (scaleLabelFontSize / 2);

                } else {

                    var isLeft = options.position === 'left';

                    scaleLabelX = isLeft ? me.left + (scaleLabelFontSize / 2) : me.right - (scaleLabelFontSize / 2);

                    scaleLabelY = me.top + ((me.bottom - me.top) / 2);

                    rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;

                    var isRight = options.position === 'right';

                    rotation = isRight ? -0.5 * Math.PI : rotation;

                }


                context.save();

                context.translate(scaleLabelX, scaleLabelY);

                context.rotate(rotation);

                context.textAlign = 'center';

                context.textBaseline = 'middle';

                context.fillStyle = scaleLabelFontColor; // render in correct colour

                context.font = scaleLabelFont;

                context.fillText(scaleLabel.labelString, 0, 0);

                context.restore();

            }

作為最終結果

https://img1.sycdn.imooc.com/657677360001179209400735.jpg

查看完整回答
反對 回復 2023-12-11
  • 1 回答
  • 0 關注
  • 162 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號