Показывать только три уровня старшей диаграммы Sunburst всегда на каждом клике в Angular8 - PullRequest
Новая
       25

Показывать только три уровня старшей диаграммы Sunburst всегда на каждом клике в Angular8

0 голосов
/ 22 января 2020

Я хочу создать диаграмму солнечных лучей, которая всегда показывает три уровня одновременно. Например, у него 5 уровней, но сначала я не хочу показывать все его уровни. Например, покажите три первых уровня вначале. При щелчке уровня 3 показывать уровень 2, 3 и 4. При щелчке уровня 4 показывать уровень 3,4,5.

Вот код, который я реализовал в AngularV8:

. html file 

<div class="kt-widget14__chart" style="min-height:300px;">
   <div class="chartjs-size-monitor-new">
       <highcharts-chart [Highcharts]="highcharts" [options]="company360SunburstOptions"
           style="width: 100%; height: 100%; display: block;">
       </highcharts-chart>
   </div>
</div>

.ts file 


this.myService.getData().subscribe(result => {
            this.chartOptions.series[0].data = result;
            this.chartOptions.series[0].point = {
                events: {
                    click: (function (event) {
                        that.poinClicked(data);
                    })
                }
            };
        });

    chartOptions = {
        chart: {
            type: "sunburst",
            height: '100%',
        },
        credits: {
            enabled: false
        },
        exporting: { enabled: false },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        plotOptions: {
            series: { // or general options: "series: { ... }"
                dataLabels: {
                    format: '{point.name}',
                    filter: {
                        property: 'innerArcLength',
                        operator: '>',
                        value: 16
                    },
                    enabled: true,
                    style: {
                        textShadow: false
                    }
                },
                animation: false
            }
        },
        series: [{
            type: "sunburst",
            data: [],
            allowDrillToNode: true,
            cursor: 'pointer',
            point: {},
            levels: [{
                level: 1,
                levelSize: {
                    units: 'percentage',
                },
                hidden: false,
                dataLabels: {
                    enabled: true
                }
            }, {
                level: 2,
                hidden: false,
                dataLabels: {
                    enabled: true
                }
            }, {
                level: 3,
                hidden: true,
                dataLabels: {
                    enabled: false
                },
                levelSize: {
                    value: 0
                }
            }, {
                level: 4,
                hidden: true,
                dataLabels: {
                    enabled: false
                },
                levelSize: {
                    value: 0
                }
            }]
        }],
        tooltip: {
            enabled: false
        }
    };

pointClicked() {

   let level = data['Level'];
   level = level + 1;
   if (level == 1) {
      this.sunburstShowLevels([1,2])
   } else if (level == 2) {
       this.sunburstShowLevels([1,2,3])
   } else if (level == 3) {
       this.sunburstShowLevels([2,3,4])
   }
}

sunburstShowLevels(levelIdList) {
   // Will get a list of levelIds that should be display
   let levels = this.chartOptions.series[0].levels; // Whole levels object
   let newLevels = [];
   for (var index=0; index<levels.length; index++) {
       var level = levels[index];
       if (levelIdList.includes(level['level'])) {
          // Then show it
          level.hidden = false; // set flag
          level['levelSize'] = {value: 1};
          level['dataLabels'] = {enabled: true}
       } else {
           level.hidden = true; // set flag
          level['levelSize'] = {value: 0};
          level['dataLabels'] = {enabled: false}
       }
       newLevels.push(level);
    }
}

Этот код покажет уровни, которые я хочу, основываясь на уровне, который я выбираю. Это почти работает. Но проблема в том, что когда я нажимаю на уровень, мне нужно дважды щелкнуть, чтобы он заработал.

Например, когда я нажимаю на втором уровне, сначала он полностью отображает уровень 2, затем, когда я нажимаю снова, он отображает нужные мне уровни: 1,2 и 3.

Проблема

Подводя итог, я хочу показывать только определенные c уровни при нажатии каждого уровня. Это решение, которое я реализовал, и проблема в том, что оно не срабатывает сразу после нажатия на него. Мне нужно дважды щелкнуть, чтобы это заработало. Любая идея?

Или Если у кого-то есть лучшее решение, я был бы очень признателен за любую помощь.

заранее спасибо.

1 Ответ

1 голос
/ 22 января 2020

У меня есть еще одна идея, как этого добиться, используя функцию series.update для обновления параметров уровня.

Демо: https://jsfiddle.net/BlackLabel/zrt4m13g/

Код: 

point: {
  events: {
    click(e) {
      let series = this.series,
        clickedLevel = this.node.level,
        currentOptions = series.userOptions.levels;

      for (let i of currentOptions) {
        if (clickedLevel !== 0 /*or 1 */ && clickedLevel !== currentOptions.length) {
          if (i.level === clickedLevel || i.level === clickedLevel + 1 || i.level === clickedLevel - 1) {
            i.levelSize = {
              value: 1
            }
          } else {
            i.levelSize = {
              value: 0
            }
          }
          i.dataLabels = {
              rotationMode: 'parallel',
              filter: {
                property: 'outerArcLength',
                operator: '>',
                value: 64
              },
              enabled: true
          }
        }
      }

      series.update({
        levels: currentOptions
      })
    }
  }
},

API: https://api.highcharts.com/highcharts/series.sunburst.levelSize

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

...