Y轴显示时间-气泡图 [英] Display Time In Y Axis - Bubble Chart

问题描述

我在

解决方案

您可以使用自定义标签格式化程序来显示时间值而不是数字。

  times = [
 3:00 am，
  7:00 am，
 11:00 am，
 3:00 pm，
 7:00 pm，
 11:00 pm ，
] 
 
 public bubbleChartOptions：ChartOptions = {
响应式：true，
比例尺：{
 xAxes：[{ticks：{min：0， max：30，}}]，
 y轴：[{
 ticks：{
 min：0，max：5，
 callback：value => this.times [value] 
} 
}] 
} 
}; 
 
公共泡沫图表数据：ChartDataSets [] = [
 {
数据：[
 {x：7，y：0，r：8}，
 {x：10，y：1，r：10}，
 {x：15，y：2，r：15}，
 {x：26，y：3，r：23}， 
]，
标签：'Series A'，
}，
]; 
  

请参阅此

I came across Bubble Chart (latest addition) in ng2-charts. I am trying to show data according to the time in Y-axis and values in X-axis. My Data is like x:[10,35,60] and y:["7.00 AM"] and r will the same value of x. Basically I want to show multiple data for one date but the sample dataset given is different from my dataset. Can you help me out? and one more thing, I want to hide r from tooltip.

Sample code

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',
    },
  ];

This Y axis supports only numeric numbers but I want to bind time like 11:15 AM

What I Want

解决方案

You can use a custom label formatter to display time values instead of numbers.

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',
  },
];

See this stackblitz for example.

Here's the image output:

这篇关于Y轴显示时间-气泡图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！