Как изменить размер и цвет шрифта для многострочного текста внутри Donut Chart с помощью Chart.js - PullRequest
Новая
       8

Как изменить размер и цвет шрифта для многострочного текста внутри Donut Chart с помощью Chart.js

0 голосов
/ 05 сентября 2018

Я использовал кольцевые диаграммы в своем приложении, и в центре диаграммы есть текст. Когда текст большой, я бы хотел обернуть его в две строки и иметь разные цвета и размеры шрифта для этих двух строк. Ниже приведен код, который я использую:

HTML код: 

<div class="chart-container">
    <p-chart #chart type="doughnut" [data]="data" [options]="pieOptions">
    </p-chart>
</div>

Component.ts: 

public constructor() {    
    this.data = {
        labels: ['A'],
        datasets: [
            {
                data: [300],
                backgroundColor: [
                    "#FF6384"
                ],
                borderColor: ["grey"],
                hoverBorderColor: ['grey'],
                hoverBackgroundColor: [
                    "#FF6384"
                ],
                borderWidth: 10,
                segmentShowStroke: false
            }]
    };

    this.pieOptions = {
        title: {
            display: true,
            text: 'My Title',
            fontSize: 16
        },
        legend: {
            position: 'bottom',
            display: false
        },
        cutoutPercentage: 80,
        responsive: true,
        maintainAspectRatio: true,
        centertext: "This is one line" + "This is second line",
    };
}

public ngAfterViewInit() {
    Chart.pluginService.register({
        beforeDraw: function (chart) {
            if (chart.options.centertext) {
                var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;

                ctx.restore();

                ctx.font = "8px verdana";
                ctx.textBaseline = "middle";

                var text = chart.options.centertext, // "75%",
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2 - (chart.titleBlock.height - 15);

                ctx.fillText(text, textX, textY);
                ctx.save();
            }
        }
    });
}

Так в коде, упомянутом выше. Я объявляю некоторый текст в опциях как «centerText» и использую его в сервисе плагинов Charts. Текст выходит за пределы графика, но не переносится на две строки. Пожалуйста, дайте мне знать, как я могу обернуть текст в две строки. Кроме того, первая строка должна иметь другой размер и цвет шрифта, а также для второй строки.

...