Angular 6 中的条形图

Question

我试图在角度 6 中使用条形图，但它不起作用。 我尝试了几种方法，例如 jqx 图表、素数面等，但它不起作用。 我已经通过 angular cli 安装了它。

Answer 1

您可以使用 chart.js 来实现这一点。

安装 chart.js 库的步骤：

• npm install chart.js --save

接下来，您必须在组件中导入模块：

• 从'chart.js'导入{图表}；

最后，根据您的数据，您可以创建图表。

让我们考虑一个显示“每月注册用户”条形图的示例。

首先，在组件模板中创建 canvas 元素，如下所示：

<canvas id="lineCharts"></canvas>

现在在你的 component.ts 文件中，创建一个函数让我们说 showChart(); 如下所示：

  showChart() {
    this.chart = new Chart('lineCharts', {
      type: 'bar',
      data: {
      labels: this.month_name, // your labels array
      datasets: [
        {
          label: '# user count',
          data: this.user_count, // your data array
          backgroundColor: [
           'rgba(54, 162, 235, 1)',
           'rgba(255, 99, 132, 1)',
           'rgba(255, 206, 86, 1)',
           'rgba(75, 192, 192, 1)',
           'rgba(153, 102, 255, 1)',
           'rgba(230, 25, 75, 1)',
           'rgba(60, 180, 75, 1)',
           'rgba(245, 130, 48, 1)',
           'rgba(145, 30, 180, 1)',
           'rgba(210, 245, 60, 1)',
           'rgba(0, 128, 128, 1)',
           'rgba(128, 0, 0, 1)'

          ],
          fill:true,
          lineTension:0.2,
          borderWidth: 1
        }
      ]
      },
      options: {
        responsive: true,
        title: {
        text:"Monthly Users Graph",
        display:true
        },
        scales: {
          yAxes:[{
            ticks:{
              beginAtZero:true
            }
          }]
        }
      }
    });
  }

其中 this.month_name 是一个标签数组，而 this.user_count 是一个数据数组。 您应该相应地提及您的标签和数据数组。

最后，您必须在 ngOnInit() 方法上调用此 showChart() 函数，如下所示：

ngOnInit(){
  this.showChart();
}

Answer 2

您可以使用来自 PrimeNG 的条形图。 像这样： https : //www.primefaces.org/primeng/#/chart/bar

使用 PrimeNG 的步骤

1. npm install primeng --save npm install primeicons --save
2. 在 angular.json 文件中添加 css 和 js，如下所示

"styles": [
    "node_modules/primeng/resources/themes/nova-light/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "node_modules/primeicons/primeicons.css",
    //...
],

3. 遵循 PrimeNg 示例