Хобрук: Ваш путь к мастерству в программировании

Chart JS, ng2-Charts - Как сделать метку справа от круговой диаграммы, а не сверху?

Я использую диаграмму js https://www.npmjs.com/package/chart.js и ng2-charts https://www.npmjs.com/package/ng2-charts, чтобы отобразить кольцевую диаграмму.

кольцевая диаграмма

Но я хочу, чтобы метка отображалась справа от кольцевой диаграммы, есть идеи, как мне это сделать?

  public monthStatsLabel: Label[] = ['Total days', 'Present', 'Leave'];
  public monthStatsData: MultiDataSet = [
    [31,28,2]
  ];
  public monthStatsType: string = 'doughnut';
  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
    console.log(event, active);
  }

<canvas baseChart
                    [data]="monthStatsData"
                    [labels]="monthStatsLabel"
                    [chartType]="monthStatsType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>
angular chart.js angular-material ng2-charts angularjs-directive
06.03.2021

Ответы:


1

Сначала импортируйте объект ChartOptions в свой component.ts:

import { ChartOptions } from 'chart.js';

Создайте с ним новую переменную в вашем component.ts:

public options: ChartOptions = {
  legend: {
    display: true,
    position: 'right'  // <=========== change this to the position you like.
  },
  title: {
    display: true,
    text: "Employee Details",
  }
  // ... and so on. see below about options
}

Теперь в вашем component.html добавьте переменную options в <canvas>:

<canvas baseChart
                [data]="monthStatsData"
                [labels]="monthStatsLabel"
                [chartType]="monthStatsType"
                [options]="options" 
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></canvas>

Подробнее о ng2-chart варианты и настройки здесь

06.03.2021
  • Большое спасибо за быстрый ответ, сработало ???? 06.03.2021
  • Нет проблем, удачного кодирования :)) 06.03.2021

    • 2

    Ничего не знаю о ng2-Charts, но, вероятно, вам нужно что-то добавить

    [options] = "chartOptions"

    к вашей базовой диаграмме и

      public chartOptions: legend = {
    position: 'right'
  };
    06.03.2021
    Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..