如何使用 ng2-charts 获取多个图表(条形图和折线图)?
How can I get multiple charts(bar and line) with ng2-charts?
我有条形图,我想在这个条形图上画平均线。
我的解决方案:
在数据集中,我添加类型为“line
”的元素:
https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts
public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartDataSets[] =
[
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
**{ data: [48, 48, 48, 48, 48, 48, 48], label: 'Series C', type: '*line*' }**
];
这条线不是从y轴的起点开始的,它没有连接到那个y轴。
(我明白了,因为它在 bar 图表中)
不过我还是想让它显示如下,它会从y轴的开始处开始:
这是我想要的结果:
我找到了一个解决方案,其中你必须在结尾和开头放置虚拟值,然后你就可以开始了。
在要显示的每个数据集的结尾和开头设置 0
很重要,还请记住在标签的结尾和开头设置占位符文本。
组件
public chart = {
"datasets": [
{ "data": [0, 30, 20, 40, 35, 45, 33, 0, 0], "label": "Bar 1" },
{ "data": [0, 50, 60, 55, 59, 30, 40, 0, 0], "label": "Bar 2" },
{ "data": [45, 45, 45, 45, 45, 45, 45, 45, 45], "label": "Line", "type": "line" }
],
"labels": ["FirstPlaceholder", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "LastPlaceholder"],
"options": {
"legend": {
"text": "You awesome chart with average line",
"display": true,
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"ticks": {
"min": "Monday",
"max": "Sunday",
}
}],
}
}
};
模板
<canvas baseChart
chartType="bar"
[datasets]="chart.datasets"
[labels]="chart.labels"
[options]="chart.options"
legend="true">
</canvas>
她就是Stackblitz.
这就是它的样子。
我有条形图,我想在这个条形图上画平均线。
我的解决方案:
在数据集中,我添加类型为“line
”的元素:
https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts
public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];
public barChartData: ChartDataSets[] =
[
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
**{ data: [48, 48, 48, 48, 48, 48, 48], label: 'Series C', type: '*line*' }**
];
这条线不是从y轴的起点开始的,它没有连接到那个y轴。
(我明白了,因为它在 bar 图表中)
不过我还是想让它显示如下,它会从y轴的开始处开始:
这是我想要的结果:
我找到了一个解决方案,其中你必须在结尾和开头放置虚拟值,然后你就可以开始了。
在要显示的每个数据集的结尾和开头设置 0
很重要,还请记住在标签的结尾和开头设置占位符文本。
组件
public chart = {
"datasets": [
{ "data": [0, 30, 20, 40, 35, 45, 33, 0, 0], "label": "Bar 1" },
{ "data": [0, 50, 60, 55, 59, 30, 40, 0, 0], "label": "Bar 2" },
{ "data": [45, 45, 45, 45, 45, 45, 45, 45, 45], "label": "Line", "type": "line" }
],
"labels": ["FirstPlaceholder", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", "LastPlaceholder"],
"options": {
"legend": {
"text": "You awesome chart with average line",
"display": true,
},
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"ticks": {
"min": "Monday",
"max": "Sunday",
}
}],
}
}
};
模板
<canvas baseChart
chartType="bar"
[datasets]="chart.datasets"
[labels]="chart.labels"
[options]="chart.options"
legend="true">
</canvas>
她就是Stackblitz.
这就是它的样子。