Текст пончика Angular 2 ng2-charts посередине исчезает при наведении мыши

Я попробовал решение, опубликованное в этом вопросе, чтобы поместить текст внутри (посередине, по вертикали и по горизонтали) кольцевая диаграмма, и она работает почти идеально. Проблема в том, что каждый раз, когда мышь наводится на график, текст мигает. Похоже, это происходит из-за того, что при наведении мышки на график снова вызывается функция, отвечающая за написание текста.

Мой код компонента выглядит примерно так:

imports ....

@Component({
    selector: 'my-component-app',
    templateUrl: '../views/my-component.component.html',
    styleUrls: ['../styles/my-component.component.css']
})

export class MyComponent implements OnInit {
    chartOptions;
    chartLabales;
    chartData;

    ngOnInit(): {
        this.chartData = ....
        this.chartOptions = ....
    }
}

Любая идея о том, как решить эту проблему? Спасибо


angular chart.js ng2-charts
person Gerardo Tarragona    schedule 16.08.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам лучше создать плагин для рисования текста, а не рисовать его по завершении анимации (по этой причине текст мигает, так как функция анимации onComplete выполняется каждый раз, когда диаграмма обнаруживает какие-либо действия пользователя).

Вопросы

Chart.plugins.register({
   afterDatasetsDraw: function(chart) {
      if (!chart.options.centerText) return;
      var ctx = chart.ctx,
         width = chart.canvas.width,
         height = chart.canvas.height;
      var fontSize = (height / 250).toFixed(2);
      ctx.font = fontSize + "em Verdana";
      ctx.textBaseline = "middle";
      ctx.fillStyle = "blue";
      var text = "Pass Rate 82%",
         textX = Math.round((width - ctx.measureText(text).width) / 2),
         textY = height / 2;
      ctx.fillText(text, textX, textY);
      ctx.restore();
   }
});

* код рисования текста в основном взят из этого ответа.
добавьте этот плагин внутрь ngOnInit(), а затем в параметрах диаграммы добавьте - centerText: true

также вам необходимо объявить переменную Chart в начале скрипта вашего компонента, например:

declare var Chart: any;
person ɢʀᴜɴᴛ    schedule 16.08.2017
comment
Понятно. Где именно должен быть размещен этот код? Перед нотацией «@Component»? Или внутри класса экспорта моего компонента? 'класс экспорта MyChartComponent реализует OnInit { Chart.plugins.register(.....); a_property: a_type; }´ - person Gerardo Tarragona; 17.08.2017
comment
Я имел в виду в вашем скрипте компонента (MyChart.component.ts) перед операторами импорта - person ɢʀᴜɴᴛ; 17.08.2017
comment
Нет! Он доступен во всем мире через библиотеку ChartJS. - person ɢʀᴜɴᴛ; 17.08.2017
comment
Я получаю ошибку Cannot find name 'Chart'. Мой проект построен с помощью Angular-CLI - person Gerardo Tarragona; 17.08.2017