如何使用 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 轴。 （我理解，因为它在 bar 图表中）

但是我仍然希望它显示如下，它将从 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。
这就是它的外观。