Кольцевые цвета и легенды о кольце - PullRequest
Новая
       11

Кольцевые цвета и легенды о кольце

0 голосов
/ 27 февраля 2019

Я пытаюсь сделать многострочку с помощью mdbootstrap.Моя проблема в том, что я не совсем понимаю взаимосвязь между наборами данных / цветами и метками.

Например, следующий код компонента:

HTML: 

<canvas mdbChart
              height="100"
              [chartType]="doughnutChart.Type"
              [data]="doughnutChart.Data"
              [datasets]="doughnutChart.DataSets"
              [labels]="doughnutChart.Labels"
              [colors]="doughnutChart.Colors"
              [options]="doughnutChart.Options"
              [legend]="true"
              (Hover)="doughnutChart.Hover($event)"
              (Click)="doughnutChart.Click($event)"></canvas>

Компонент(TS): 

import { Component, OnInit , Input} from '@angular/core';
import { DoughnutChart } from './doughnutchart';

@Component({
  selector: 'app-doughnut-chart',
  templateUrl: './doughnutchart.component.html',
  styleUrls: ['./doughnutchart.component.css']
})
export class DoughnutchartComponent implements OnInit {

  @Input() doughnutChart: DoughnutChart;
  constructor() { }

  ngOnInit() {
  }

}

класс (TS): 

export class DoughnutChart {
  Type: string;
  Data: Array<any>;
  DataSets: Array<any>;
  Labels: Array<any>;
  Colors: Array<any>;
  Options: any;
  Title: string;
  Hover: (event) => void;
  Click: (event) => void;
}

Расходуется так: 

this.realTimeUsage = new DoughnutChart();
this.realTimeUsage.Type = 'doughnut';
this.realTimeUsage.Title = LocalizationMessages.getMessage(this.locale, "USAGE_TITLE");
this.realTimeUsage.Colors = [{
  backgroundColor: [
    "rgb(255, 0, 0)", // red
    "rgb(0, 255, 0)", // green
  ],
},
{
  backgroundColor: [
    "rgb(255, 0, 0)", // red
    "rgb(0, 255, 0)", // green
  ],
},
{
  backgroundColor: [
    `#${colorGray}`, // gray
    "rgb(0, 0, 0)", // black
  ],
},];
this.realTimeUsage.DataSets = [
  // Outer doughnut data starts
  {
    data: [
      payload.declared,
      0,
    ],
  },
  // Outer doughnut data ends
  // Middle doughnut data starts
  {
    data: [
      payload.active,
      payload.declared - payload.active,

    ],
  },
  // Middle doughnut data ends
  // Inner doughnut data starts
  {
    data: [
      payload.connected,
      payload.active - payload.connected,
    ],
  }
  // Inner doughnut data ends
];
this.realTimeUsage.Options = {
  rotation: 0.75 * Math.PI, //-0.75 * Math.PI - Math.PI / 2,
  circumference: 0.75 * 2 * Math.PI,
  legend: {
    position: 'right',
    //labels: {
    //  generateLabels: this.generateLabels
    //}
  },
  showAllTooltips: false,
  responsive: true,
  tooltips: {
    // remove the square color from the tooltip
    displayColors: false,
    callbacks: {
      // Only display the value in the tooltip
      label: (tooltipItem, data) => {
        const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        return String(value);
      }
    }
  }

};

Со следующей полезной нагрузкой:

{"объявлено": 4, "активно": 3, "подключено": 2}

Создает следующий результат:

enter image description here

Каждый пончик должен показывать 2 значения, цвет, соответствующий последнему (справа), должен быть прозрачным.Цель состоит в том, чтобы получить внешний пончик, который заполняет кольцо, средний пончик, который показывает меньшее частичное кольцо, а внутренний пончик - крошечное кольцо.

Я не понимаю, почему легенды не отражают правильные цвета и почему один из них вычеркнут.

РЕДАКТИРОВАТЬ 1 : я решил проблему легенды, используя3 значения для данных.Проблема цвета остается.

...