Question

我正在尝试在角度6中使用条形图，但是它不起作用。我已经尝试了几件事，例如jqx图表，素面等，但是它不起作用。我已经通过角度cli安装了它。

Answer 1

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

安装chart.js库的步骤：

npm install chart.js-保存

接下来，您必须将模块导入到您的组件中

从“ 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的步骤

npm install primeng --save npm install primeicons --save
在您的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",
    //...
],

遵循PrimeNg示例

Angular 6中的条形图

2 个答案: