Время отображения по оси Y - пузырьковая диаграмма - PullRequest
Новая
       26

Время отображения по оси Y - пузырьковая диаграмма

2 голосов
/ 08 марта 2019

Я встречал Bubble Chart (последнее добавление) в ng2-диаграммах . Я пытаюсь отобразить данные по времени по оси Y и значениям по оси X. Мои данные имеют вид x: [10,35,60], а y: ["7.00 AM"] и r будут иметь одинаковое значение x. В основном я хочу показать несколько данных за одну дату, но приведенный образец набора данных отличается от моего набора данных. Можете ли вы помочь мне? и еще одна вещь, которую я хочу скрыть r из всплывающей подсказки.

Пример кода

HTML 

 <div style="display: block">
      <canvas baseChart [datasets]="bubbleChartData" [options]="bubbleChartOptions"
    [colors]="bubbleChartColors" [legend]="bubbleChartLegend" [chartType]="bubbleChartType"
    (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
    </div>

TS 

 public bubbleChartType: ChartType = 'bubble';
  public bubbleChartLegend = true;

  public bubbleChartData: ChartDataSets[] = [
    {
      data: [
        { x: 10, y: 10, r: 10 },
        { x: 15, y: 5, r: 15 },
        { x: 26, y: 12, r: 23 },
        { x: 7, y: 8, r: 8 },
      ],
      label: 'Series A',
      backgroundColor: 'green',
      borderColor: 'blue',
      hoverBackgroundColor: 'purple',
      hoverBorderColor: 'red',
    },
  ];

Эта ось Y поддерживает только числовые числа, но я хочу связать время как 11:15 AM

Что я хочу

What I want

1 Ответ

1 голос
/ 20 марта 2019

Вы можете использовать пользовательский форматировщик меток для отображения значений времени вместо чисел. 

times = [
  "3:00 am",
  "7:00 am",
  "11:00 am",
  "3:00 pm",
  "7:00 pm",
  "11:00 pm",
]

public bubbleChartOptions: ChartOptions = {
  responsive: true,
  scales: {
    xAxes: [{ ticks: { min: 0, max: 30, } }],
    yAxes: [{
      ticks: {
        min: 0, max: 5,
        callback: value => this.times[value]
      }
    }]
  }
};

public bubbleChartData: ChartDataSets[] = [
  {
    data: [
      { x: 7, y: 0, r: 8 },
      { x: 10, y: 1, r: 10 },
      { x: 15, y: 2, r: 15 },
      { x: 26, y: 3, r: 23 },
    ],
    label: 'Series A',
  },
];

См., Например, stackblitz .

Вот вывод изображения:

enter image description here

...