代码之家 › 专栏 › 技术社区 › Pascal

海图-更多系列,然后是数据

highcharts typescript angular

Pascal · 技术社区 · 4 年前

我搜索了StackVlow,但找不到以下问题的解决方案。我在一个由地图给出的循环中构建了一系列柱状图。基本上一切正常。但我总是看到太多的连续剧。

这张图片显示,我实际上有五个系列,这五个系列在本专栏中的显示是正确的。但传说中也有第六部。起初我以为地图上有空值,但地图看起来是这样的。

图表系列的任务如下所示。

  map.forEach((value, key) => {
    this.resultChart.addSeries({
                                 type: 'column',
                                 name: key.replace('_', ' '),
                                 data: value,
                                 color: DisplayUtil.getStatusColor(key)
                               });
  });

所以问题是这个系列从何而来? 如果我从数据库中删除数据,使地图为空,那么这个序列仍然存在。

  ngAfterContentInit() {
    if (this.chartData) {
      this.chartData.forEach((item) => {
        this.categories.push(this.getWeekNumber(item.historyDate));
      });

      const chartOptions: Options = this.createDefaultColumnOptions();
      chartOptions.title.text = this.chartTitle;
      this.resultChart = Highcharts.chart(this.resultChartTarget.nativeElement, chartOptions);
      this.resultChart.addSeries(this.buildColumnSeries(this.chartData));
    }
  }

以下是构建该系列的方法。

private buildColumnSeries(chartData: any[]) {
    const options: SeriesOptions = {
      id: this.uuidService.getNewUuid(),
    } as SeriesOptions;

    if (chartData.length > 0) {
      const map = new Map();

      chartData.forEach((item) => {
        const chartDataStatus = item[this.statusLabel];
        const keys = Object.keys(chartDataStatus);
        keys.forEach((key) => {
          if (this.keyExist(map, key)) {
            const array = map.get(key);
            array.push(chartDataStatus[key]);
            map.set(key, array);
          } else {
            map.set(key, [chartDataStatus[key]]);
          }
        });
      });

      console.log("map: ", map);

      map.forEach((value, key) => {
        this.resultChart.addSeries({
                                     type: 'column',
                                     name: key.replace('_', ' '),
                                     data: value,
                                     color: DisplayUtil.getStatusColor(key)
                                   });
      });
    }

    return options;
  }

有人知道第六季是从哪里来的吗?

0 回复 | 直到 4 年前

Pascal 4 年前

不需要在option build ColumnSeries方法中返回series选项,这会导致数据系列出现问题。上面几行已经定义了图表选项:

const chartOptions: Options = this.createDefaultColumnOptions ();

更改后的方法现在看起来是这样的。

private buildColumnSeries(cData: StatisticsHistoryModel[]) {
    if (cData.length > 0) {
      const map = new Map();
      cData.forEach((item) => {
        const chartDataStatus = item[this.statusLabel];
        const keys = Object.keys(chartDataStatus);
        keys.forEach((key) => {
          if (this.keyExist(map, key)) {
            const array = map.get(key);
            array.push(chartDataStatus[key]);
            map.set(key, array);
          } else {
            map.set(key, [chartDataStatus[key]]);
          }
        });
      });

      map.forEach((value, key) => {
        this.resultChart.addSeries({
                                     type: 'column',
                                     name: key.replace('_', ' '),
                                     data: value,
                                     color: DisplayUtil.getStatusColor(key)
                                   });
      });
    }
  }