angular - 如何使用 ng2-charts 获取多个图表(条形图和折线图)？

Question

我有条形图，我想在此条形图上绘制平均线。

我的解决方案:

在数据集中，我添加类型为“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 轴。(我明白，因为它在条形图表中)

但是我仍然希望它显示如下，它将从 y 轴的开头开始:

这是我想要的结果:

Answer 1

我找到了一个解决方案，您必须在末尾和开头放置虚拟值，然后就可以开始了。

在要显示的每个数据集的末尾和开头设置 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 .
这就是它的样子。