Highchart不添加新系列或删除旧系列 [英] Highchart not adding new series or removing old series

问题描述

我正在使用Angular显示基本的柱形图.这个想法是要显示不同节点创建了多少个数据条目(这将从Web服务器接收，但是为了简单起见，我已经删除了该代码)

I am using Angular to show a basic column chart. The idea is to show how many data entries was created by different nodes (This will be received from a web server, but I have removed that code for simplicity for now)

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

I start with showing two basic columns. Then on a button press I change the series so that it only has one entry. In this case, the first column changes and shows the new data, but the second column stays there, showing the old data even though the series has been completely changed. (The update method in TS file)

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

In the second case, when I add multiple data entries, only the newest two are shown as columns.

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

My question is how can I change this code to dynamically change the number of columns based on the entries in the series object? I need this to work effectively since I will never know beforehand how many columns there needs to be as this will be sent from a webservice.

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>

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

If the problem is unclear, I can edit the post to add screenshots?

预先感谢

推荐答案

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

I found the solution, it is actually very simple.

Firstyl，必须在开始时将其包括在内.

Firstyl, this needs to be included at the beginning.

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

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

在HTML中，您可以像这样更改它:

And in the HTML you change it like this:

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

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

This way you can have a handle on the chart.

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

Secondly, to dynamically remove old data and show new data with an unknown number of columns a couple of things needs to happen.

1. 从图表中删除所有系列.
2. 清除系列对象.
3. 添加您需要的系列数.
4. 将数据放入系列对象
5. 将系列对象分配回图表的系列数据.

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

This can be seen in the function I wrote below. Note that this function is called when new data arrives from the server.

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不添加新系列或删除旧系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！