问题
Chart.js supports bubble charts, but the ng2-chart docs don't mention them. Is it possible to build a bubble chart with ng2-charts
? Any pointer to a working example would be great.
note: cross-posted on github
回答1:
I've had a look at the source code. As of version 1.1.0
(May 17 2016), bubble charts do not appear to be supported.
回答2:
The npm package ng2-charts now supports bubble charts (as of version 2.0.0-beta.10
)
Here's the snippet from the demo app:
<div style="display: block">
<canvas baseChart [datasets]="bubbleChartData" [options]="bubbleChartOptions" [colors]="bubbleChartColors"
[legend]="bubbleChartLegend" [chartType]="bubbleChartType"></canvas>
</div>
Code:
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() {
}
}
(I am a collaborator on that package).
来源:https://stackoverflow.com/questions/37843632/how-to-make-chart-js-bubble-chart-with-ng2-chart