angular - Angular Primeng 图表：带折线图的条形图

Question

请帮忙。这里有没有人已经在angular2+中实现了这种类型的图表组合？我目前使用角度 6。

http://www.chartjs.org/samples/latest/charts/combo-bar-line.html

请分享您的解决方案。谢谢你。

Answer 1

 <p-chart type="bar" [data]=monthlyConfig></p-chart>

并且您需要将类型参数传递给配置。

    this.monthlyConfig = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
    {
      type: 'line',
      label: 'Dataset 1',
      borderColor: '#FF671F',
      borderWidth: 2,
      fill: false,
      data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100))
    }, 
    {
      type: 'bar',
      label: 'Dataset 2',
      backgroundColor: '#FF671F',
      data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
      borderColor: 'white',
      borderWidth: 2
    },
  ]
}

Answer 2

使用以下角度图表： https ://canvasjs.com/angular-charts/

app.component.html

<div id="chartContainer" style="height: 370px; width: 100%; margin-left:auto;margin-right:auto;"></div>

app.component.ts

 import { Component, OnInit } from '@angular/core';
    import * as CanvasJS from './CanvasJS';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})     
export class AppComponent implements OnInit {
    ngOnInit() {
    let chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        animationEnabled: true,
        exportEnabled: true,
        title:{
            text: "Monthly Expense"
        },
        data: [{
            type: "pie",
            showInLegend: true,
            toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
            indexLabel: "{name} - #percent%",
            dataPoints: [
                { y: 450, name: "Food" },
                { y: 120, name: "Insurance" },
                { y: 300, name: "Traveling" },
                { y: 800, name: "Housing" },
                { y: 150, name: "Education" },
                { y: 150, name: "Shopping"},
                { y: 250, name: "Others" }
            ]
        }]
    });

    chart.render();
    }
}