如何使用ng2-charts获取多个图表(条形图和折线图)? [英] How can I get multiple charts(bar and line) with ng2-charts?

问题描述

我有条形图，我想在该条形图上绘制平均线.

I have bar chart and I want to draw average line on this bar chart.

我的解决方案:

在数据集中，我添加了类型为'line'的元素:

In data sets, I add element with type as '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轴. (我理解是因为它在条形图图表中)

The line does not start at the beginning of the y axis, it is not connected to that y axis. (I understand because it's in the bar chart)

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

However I still want it to be displayed as below, it will be started at the beginning of the y axis:

这是我想要的结果:

This is my desired result:

推荐答案

我找到了一个解决方案，在该解决方案中，您必须在末尾放置虚拟值，然后才能使用.

I found a solution with, in which you have to place dummy value at the end and beginning and your good to go.

重要的是，在要显示的每个数据集的末尾设置0，还要记住在标签的末尾设置占位符文本.

Its important that you set 0 at the end and beginning of every dataset you want to display, also remember to set a placeholder text at the end and beginning for you labels.

组件

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 .
这就是它的外观.

Her is the Stackblitz.
And this is how it looks.

这篇关于如何使用ng2-charts获取多个图表(条形图和折线图)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！