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

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

  •  0
  • Pascal  · 技术社区  · 4 年前

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

    enter image description here

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

    enter image description here

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

      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 年前
        1
  •  0
  •   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)
                                       });
          });
        }
      }