angular - 关于 Angular 2 的高图表

Question

我正在使用 Angular 2 中的高图表，问题是，我一次只能显示一个图表。

我现在该怎么办？

两者都在 ngOninit 内部

我需要显示两个图表，我已经尝试了一切但没有用

谁能建议我该怎么做

第一个图表开始，这是一个饼图

//Pie chart starts
     Highcharts.chart(this.container.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45
        }
      },
      title: {
        text: 'Contents using Pie chart'
      },
      subtitle: {
        text: '3D donut in Highcharts'
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      },
         tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of 
         total<br/>'
      },    

     //GET ALL

      series: [{
        name: 'TOTAL chart',
        data: [

          {
            name: 'Payment',
            y:15,
            drilldown: 'payment'
          }
        ]
      }],

       //Drill Downs     
      drilldown: {
        series: [
                     {
          name: 'Payment versions',
          id: 'payment',
          data: [
            ['Payment A', 55.03],
            ['Payment B', 15.83]
          ]
        }                              
      ]
      }
    })
//Pie chart ends

现在下一个图表开始，它是一个垂直图表

//Vertical bar chart starts 
      Highcharts.chart(this.container.nativeElement, {
      // Created pie chart using Highchart
         chart: {
      type: 'column'
    },

    xAxis: {
    type: 'category'
     },

    series: [{
     name: 'TOTAL chart',
     data: [

      {
        name: 'Planned',
        y: 30,
        drilldown: 'planned'
      }
     ]
    }],    
    //Drill Downs     
     drilldown: {
     series: [         
      {
      name: 'Planned Drill Down',
      id: 'planned',
      data: [
        ['plan A', 55.03],
        ['plan B', 15.83]
      ]
      }                 
      ]
    }
    })
//Vertical bar chart ends

标签： angularhighcharts

Answer 1

现在，您正在将两个图表添加到同一个容器中（通过使用：）this.container.nativeElement。

所以第二个图表覆盖了第一个图表的内容。

您需要两个单独的容器。

<div #pieChartContainer></div>
<div #barChartContainer></div>

然后在您的组件类中，您可以在 ngAfterViewInit 中访问它们并从那里获取它。

在这里，试一试：

import { Component, ViewChild } from "@angular/core";
import * as Highcharts from "highcharts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {

  @ViewChild("pieChartContainer", { static: false }) pieChartContainer;
  @ViewChild("barChartContainer", { static: false }) barChartContainer;

  ngOnInit() {}

  ngAfterViewInit() {
    //Pie chart starts
    Highcharts.chart(this.pieChartContainer.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: "pie",
        options3d: {
          enabled: true,
          alpha: 45
        }
      },
      title: {
        text: "Contents using Pie chart"
      },
      subtitle: {
        text: "3D donut in Highcharts"
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat:
          '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
      },

      //GET ALL

      series: [
        {
          name: "TOTAL chart",
          data: [
            {
              name: "Payment",
              y: 15,
              drilldown: "payment"
            }
          ]
        }
      ],

      //Drill Downs
      drilldown: {
        series: [
          {
            name: "Payment versions",
            id: "payment",
            data: [["Payment A", 55.03], ["Payment B", 15.83]]
          }
        ]
      }
    });
    //Pie chart ends

    //Vertical bar chart starts
    Highcharts.chart(this.barChartContainer.nativeElement, {
      // Created pie chart using Highchart
      chart: {
        type: "column"
      },

      xAxis: {
        type: "category"
      },

      series: [
        {
          name: "TOTAL chart",
          data: [
            {
              name: "Planned",
              y: 30,
              drilldown: "planned"
            }
          ]
        }
      ],
      //Drill Downs
      drilldown: {
        series: [
          {
            name: "Planned Drill Down",
            id: "planned",
            data: [["plan A", 55.03], ["plan B", 15.83]]
          }
        ]
      }
    });
    //Vertical bar chart ends
  }
}

这是您的参考的工作演示。