Question

我正在使用Angular显示基本的柱形图。这样做的目的是显示不同节点创建了多少个数据条目（这将从Web服务器接收，但是为了简便起见，我已经删除了该代码）

我首先显示两个基本列。然后按下按钮，我更改系列，使其只有一个条目。在这种情况下，第一列会更改并显示新数据，但是第二列将保留在此处，即使序列已完全更改，也会显示旧数据。（TS文件中的更新方法）

在第二种情况下，当我添加多个数据条目时，只有最新的两个显示为列。

我的问题是我如何才能更改此代码以根据series对象中的条目动态更改列数？我需要它能有效地工作，因为我永远不会事先知道需要多少列，因为这将从Web服务发送。

.TS文件

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { AuthService } from '../../../auth/auth.service';

@Component({
  selector: 'app-widget-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.scss']
})
export class AreaComponent implements OnInit {

  series = [];

  chartOptions: any;

  Highcharts = Highcharts;

  updateFromInput = false;

  constructor(public authService: AuthService) { }

  ngOnInit(): void {
    this.myChart();
 }

 myChart(){
  this.chartOptions = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Total entries by each node'
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
        title: {
            text: 'total entries'
        }
    },
    tooltip: {
        split: false,
        valueSuffix: ' Entries'
    },
    plotOptions: {
      line: {
          dataLabels: {
              enabled: false
          },
          enableMouseTracking: true
      }
  },
    series: [{
        name: 'Node 1',
        data: [22]
    }, {
        name: 'Node 2',
        data: [16]
    }]
};

  setTimeout(() => {
  window.dispatchEvent(
    new Event('resize')
  );
},300);
 }

 update(){
  for (let i = 0; i< this.site.nodes.length; i++){
    this.series.push({name: 'Node ' + (i+1), data: [3]});
  }
  this.chartOptions.series = this.series;
  this.updateFromInput = true;
}

}

HTML文件

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
  [(update)]="updateFromInput">
</highcharts-chart>
<button (click)="update()">Add</button>

如果问题不清楚，我可以编辑帖子以添加屏幕截图吗？

预先感谢

Answer 1

我找到了解决方案，它实际上非常简单。

Firstyl，必须在开始时添加。

  chartOptions: any;
  Highcharts: typeof Highcharts = Highcharts;
  chartRef: Highcharts.Chart;

chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
  };

然后在HTML中像这样更改它：

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
  [(update)]="updateFromInput"
  [callbackFunction]="chartCallback">
</highcharts-chart>

这样，您可以在图表上找到一个句柄。

第二，要动态删除旧数据并显示未知列数的新数据，需要做几件事。

从图表中删除所有系列。
清除系列对象。
添加您需要的系列数。
将数据放入系列对象
将系列对象分配回图表的系列数据。

这可以在我下面编写的函数中看到。请注意，当新数据从服务器到达时，将调用此函数。

update(){
   this.removeAll();//remove all the series from the chart
   this.series = [];//clear die series object
  //this for loop creates the new number of series and then populates the series object
   for (let i = 0; i< dataFromServer.length; i++){
    this.chartRef.addSeries({
      type: 'column',
      name: 'array',
      data: [0]
    }, false);

    this.series.push({name: dataFromServer[i].name, data: [dataFromServer[i].data]});
  }
   this.chartOptions.series = this.series;
   this.updateFromInput = true;
}

removeAll(){
  while (this.chartRef.series.length) {
    console.log(this.chartRef.series[0]);
    this.chartRef.series[0].remove();
  }
}

Highchart不添加新系列或删除旧系列

.TS文件

HTML文件

1 个答案: