如何使用 ng2-chart 制作 Chart.js 气泡图？答案

【问题标题】：How to make Chart.js Bubble chart with ng2-chart?如何使用 ng2-chart 制作 Chart.js 气泡图？
【发布时间】：2016-10-17 01:15:31
【问题描述】：

Chart.js supports bubble charts，但 ng2-chart 文档没有提及它们。是否可以使用ng2-charts 构建气泡图？任何指向工作示例的指针都会很棒。

注意：cross-posted on github

【问题讨论】：

标签： angular chart.js ng2-charts

【解决方案1】：

npm 包 ng2-charts 现在支持气泡图（截至版本 2.0.0-beta.10）

这是演示应用程序中的 sn-p：

<div style="display: block">
  <canvas baseChart [datasets]="bubbleChartData" [options]="bubbleChartOptions" [colors]="bubbleChartColors"
    [legend]="bubbleChartLegend" [chartType]="bubbleChartType"></canvas>
</div>

代码：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color } from 'ng2-charts';

@Component({
  selector: 'app-bubble-chart',
  templateUrl: './bubble-chart.component.html',
  styleUrls: ['./bubble-chart.component.scss']
})
export class BubbleChartComponent implements OnInit {
  public bubbleChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{ ticks: { min: 0, max: 30, } }],
      yAxes: [{ ticks: { min: 0, max: 30, } }]
    }
  };
  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',
    },
  ];

  public bubbleChartColors: Color[] = [
    {
      backgroundColor: [
        'red',
        'green',
        'blue',
        'purple',
      ]
    }
  ];

  constructor() { }

  ngOnInit() {
  }
}

（我是那个包的合作者）。

【讨论】：

【解决方案2】：

我看过the source code。从版本 1.1.0（2016 年 5 月 17 日）开始，似乎不支持气泡图。

【讨论】：