Question

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

“stack：String此数据集所属的组的ID（堆叠时，每个组将是一个单独的堆栈）”

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

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

label: 'Label',

type: 'bar',

stack: '1'
}
]

但没有做任何事情。

以下是ng2-charts的数据集属性： datasets（Array＆lt; {data：Array | number []，label：string}＆gt;） - 数据见，图例和工具提示中出现的数据集的标签

是否可以单独堆叠组？

谢谢！

Answer 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 - ＆GT;它直接为我工作

我在创建条形图时检查是否检查了堆栈时找到了此解决方案。他们不在我现在的版本中。

Answer 2

所以我发现执行此操作的方法是取消yaxis的堆栈，然后将堆栈添加到数据集属性中，如下所示：

 {
                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'
            },

如何在ng2图表中使用组堆叠？

2 个答案: