【问题标题】:Stacked Bar in ng2-chartsng2 图表中的堆积条形图
【发布时间】:2019-03-19 05:41:50
【问题描述】:

我浏览了ng2-charts 的文档,但找不到像Stacked Bar 这样的文件。 ng2-charts有没有其他方法可以实现堆叠条形图?请帮帮我

【问题讨论】:

标签: angular typescript charts stacked-chart ng2-charts


【解决方案1】:

这是绝对支持的,它记录在 chart.js documentation 中。您只需使用datasets 对象上的stack 属性定义哪些数据集堆叠在一起:

public barChartData: ChartDataSets[] = [
  { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];

stackblitz 为例。

【讨论】:

    【解决方案2】:

    实现“水平和垂直堆积条形图”的简单方法
    使用图表“选项”使其变得简单,检查代码。
    在.ts中

    public barChartOptions = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [
        {
          stacked: true, 
          ticks: {
            stepSize: 1
          }
        }
      ],
      yAxes: [
        {
          stacked: true,
        }
      ]
    },
    

    };

    在模板中

    <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType"> </canvas>

    查看Stackblitz上的完整代码。

    【讨论】:

    • 欢迎来到 Stack Overflow!虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效
    猜你喜欢
    • 1970-01-01
    • 2019-04-02
    • 2017-10-14
    • 2017-02-26
    • 1970-01-01
    • 2021-07-03
    • 2014-02-09
    • 1970-01-01
    相关资源
    最近更新 更多