убрать зачеркивание в диаграмме chart.js - PullRequest
Новая
       72

убрать зачеркивание в диаграмме chart.js

1 голос
/ 16 мая 2019

Я пытаюсь изменить внешний вид легенды, удалив эффект strikethrough без использования функции legendCallback в chart.js.Причина, по которой я не хочу использовать функцию legendCallback, потому что у меня есть свои собственные настройки в chart.options.legend.onClick.следовательно, если я использую legendCallback, я не смогу использовать chart.options.legend.onClick.

после тщательного изучения источника Chart.js, я узнаю, что внутри функции рисования Chart.Legend ониприменяют эффект strikethrough.

Вот ссылка на plugin.legend.js

, а вот фрагмент кода, который применяет стиль 

    var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;

            ctx.fillText(legendItem.text, xLeft, yMiddle);

            if (legendItem.hidden) {
                // Strikethrough the text if hidden
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.moveTo(xLeft, yMiddle);
                ctx.lineTo(xLeft + textWidth, yMiddle);
                ctx.stroke();
            }
        };

Я хочу знать, как мы сможем изменить поведение strikethrough, просто применив эффект исчезновения, когда легенда не активна или скрыта.

во время поиска решения, с которым я столкнулсяэто codepen , где некоторые пытались переопределить функциональность, но, к сожалению, теперь он работает правильно с chart.js version 2.7.3

Ссылка на моя скрипка

1 Ответ

0 голосов
/ 03 июня 2019

На данный момент я скачал версию chart.js с отступом и внес следующие изменения 

var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;




        if (legendItem.hidden) {
            // Strikethrough the text if hidden , comment out the strikethrough code
            /*ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.moveTo(xLeft, yMiddle);
            ctx.lineTo(xLeft + textWidth, yMiddle);
            ctx.stroke();*/


           ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();

        }
            ctx.fillText(legendItem.text, xLeft, yMiddle);
            ctx.fillStyle = fontColor;

    };

и для изменения цвета поля легенды измените функцию drawLegendBox следующим образом 

if(legendItem.hidden){

    ctx.fillStyle = "#D6D6D6";
    ctx.strokeStyle = "#D6D6D6";

}else{

     ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
     ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);

}

Я понимаю, что это не правильный способ. Тем не менее, я действительно не знаю, как мне расширить Легенду и переопределить только необходимую часть.

Обновленная скрипка

...