Скрыть / отобразить соответствующие данные из диаграммы в легенде щелкните ngx-диаграммы

Я работаю с angular 6 и ngx-chart, и мне нужно щелкнуть элемент легенды, соответствующие данные из диаграммы должны отображаться / скрываться

Библиотека ng-chart действительно имеет эту функцию, и мой клиент запрашивает ее.

Edit01:

У меня почти все работает, но у меня проблема с применением axisFormat. как только я удаляю элемент из легенды, он переформатирует ось x и буквально не показывает, как данные поступают без применения AxisFormat. Любое решение?

onSelect (event) {
  let temp = JSON.parse(JSON.stringify(this.multi));
  this.sourceData = JSON.parse(JSON.stringify(this.multi2));

  if (this.isDataShown(event)) {    
      //Hide it
      temp.some(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];
        // console.log('pie', pie[0], event, pie2);

          if (pie2 === event) {
            pie.series = [];
              return true;
          }
      });
  } else {
      //Show it back
      console.log('Entramos en el ELSE');
      const pieToAdd = this.sourceData.filter(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];

          return pie2 === event;
      });
      temp.some(pie => {
        const pie2 = pie.name[0] + ',' + pie.name[1];

          if (pie2 === event) {
              pie.series = pieToAdd[0].series;
              return true;
          }
      });
  }
  console.log('log temp: ' + JSON.stringify(temp));
  this.multi = temp;
  // this.axisFormat(this.multi);
}

isDataShown = (name) => {
  const selectedPie = this.multi.filter(pie => {
    const pie2 = pie.name[0] + ',' + pie.name[1];
      return pie2 === name && pie.series[0] !== undefined;
  });
  return selectedPie && selectedPie.length > 0;
}


axisFormat(val) {
  const options = { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' };
  // Esto funciona pero al hacer timeline no pone horas val.toLocaleDateString("es-ES", options);
  console.log('val:', val.toLocaleDateString('es-ES', options));

  return val.toLocaleDateString('es-ES', options);
}

HTML

<ngx-charts-line-chart [view]="" [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" legendPosition="'below'" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
        [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [timeline]="timeline" [roundDomains]="true" [animations]="animations"  (select)="onSelect($event)" [xAxisTickFormatting]="axisFormat">

        <ng-template #seriesTooltipTemplate let-items="model">
            <p>{{items[0].name | date:'medium'}}</p>
            <ul>
                <li *ngFor="let item of items">
                    {{item.series}}: {{item.value | number}}
                </li>
            </ul>
        </ng-template>
   
    </ngx-charts-line-chart>

ИЗМЕНИТЬ

Здравствуйте, мне уже удалось решить проблему, добавив пример на случай, если это может помочь другим людям.

https://stackblitz.com/edit/click-lengd-ngx-charts


ngx-charts
person Manolait    schedule 26.11.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я новичок в Stack Overflow, но думаю, вам следует уточнить свой ответ и показать нам, что вы уже пробовали. Тем не менее я постараюсь вам помочь.

Вы должны присвоить диаграмме (select)="onClickFunction ($event)" в HTML. Затем в своем TS вы вызываете onClickFunction(event). Я всегда начинаю с console.log(event), чтобы увидеть, что я получаю от нажатия на легенду.

Щелкнув по легенде, вы получите метку элемента, на котором щелкнули. Затем вы можете найти эту метку в своих данных и удалить эти данные из массива, который вы используете для заполнения диаграммы.

Если вы предоставите stackblitz или plunker с вашим кодом, я с радостью покажу вам, как это сделать.

person jalei005    schedule 27.11.2019

arrow_upward
1
arrow_downward

Вот как мы можем добиться этого для ngx-pie-chart. С помощью события select зафиксируйте его, определите элемент в данных и обнуляйте. Затем при следующем щелчке верните значение из исходной копии. Посмотрите, как это работает здесь ngx-pie-chart label-filter

onSelect (event) {
    let temp = JSON.parse(JSON.stringify(this.single));
    if (this.isDataShown(event)) {
        //Hide it
        temp.some(pie => {
            if (pie.name === event) {
                pie.value = 0;
                return true;
            }
        });
    } else {
        //Show it back
        const pieToAdd = this.sourceData.filter(pie => {
            return pie.name === event;
        });
        temp.some(pie => {
            if (pie.name === event) {
                pie.value = pieToAdd[0].value;
                return true;
            }
        });
    }
    this.single = temp;
}

isDataShown = (name) => {
    const selectedPie = this.single.filter(pie => {
        return pie.name === name && pie.value !== 0;
    });
    return selectedPie && selectedPie.length > 0;
}
person Azher    schedule 27.02.2020
comment
Благодаря этому вдохновению я добился этого с помощью многополосной диаграммы: stackblitz.com/edit/ - person lienok; 25.06.2020
comment
Здравствуйте, прежде всего спасибо за помощь. Я работаю с линейным графиком. У меня уже почти все работает, но теперь у меня проблема с AXIS X. Он не принимает формат. Только при первом открытии экрана. когда я нажимаю какой-либо элемент легенды, он не может преобразовать данные. Я редактирую пост, чтобы добавить то, что у меня есть. - person Manolait; 26.06.2020
comment
@Manolait Не могли бы вы создать stackblitz или plunkr. Будет полезно. - person Azher; 27.06.2020
comment
Здравствуйте, мне уже удалось решить проблему добавьте пример stackblitz.com/edit/click -lengd-ngx-charts Знаете ли вы, как выделить легенду при нажатии на нее? - person Manolait; 02.07.2020