如何在 ng2-charts 中使用 Group Stacking？答案

【问题标题】：How to do Group Stacking available in ng2-charts?如何在 ng2-charts 中使用 Group Stacking？
【发布时间】：2018-08-04 02:13:44
【问题描述】：

在原始 Chart.js 中，数据集结构有一个名为 stack 的属性，可用于单独堆叠一组数据集。

"stack: String 该数据集所属组的ID（堆叠时，每个组都是一个单独的栈）"

我尝试在 ng2-charts 中这样做：

public barChartData: any[] =[
{
data: [],

label: 'Label',

type: 'bar',

stack: '1'
}
]

但什么也没做。

这是来自 ng2-charts 的数据集属性： datasets (Array) - data see about，出现在图例和工具提示中的数据集标签

是否有单独堆叠组的解决方法？

谢谢！

【问题讨论】：

标签： ng2-charts

【解决方案1】：

您对文档所说的内容是正确的，我正在尝试做同样的事情。我以这个为例进行了尝试，它应该可以工作，根据链接：http://www.chartjs.org/docs/latest/charts/bar.html 在我的 .ts 中：

public barChartData:any[]=[
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: '1'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: '1'},
{data: [42, 24, 71, 14, 31, 49, 30], label: 'Series C', stack: '2'}
];

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];

public barChartOptions:any = {        
    responsive: true,
    scales:{
        xAxes:[{
            stacked:true
        }],
        yAxes:[{
            stacked:true
        }]
    }
  };
  public barChartType:string = 'bar';

在我的 HTML 中：

<canvas id="chart1" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>

我为分组堆栈栏找到了这个 chart.js 示例。不幸的是，这是普通的 JS：https://github.com/chartjs/Chart.js/blob/master/samples/charts/bar/stacked-group.html

编辑：使用我上面的代码并执行 npm install chart.js@2.6 --save -> 它直接为我工作

我在检查创建条形时是否检查了堆栈时发现了这个解决方案。它们不在我当前的版本中。

【讨论】：

您好，我遇到了类似的问题，我能够创建一个分组堆栈图。但我无法更改堆叠栏中的颜色。我需要将颜色设置为红色。黄绿色。以及我需要显示子组的标签。你能建议我吗..

【解决方案2】：

所以我发现这样做的方法是取消堆叠y轴，然后将堆栈添加到数据集属性，如下所示：

 {
                data: [],
                label: 'dataset 1',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },
            {
                data: [],
                label: 'dataset 3',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },
            {
                data: [],
                label: 'dataset 4',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },

【讨论】：