highcharts Highcarts:当系列不可见时隐藏x轴类别

qeeaahzv  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(232)

在堆积柱形图中,为每个X轴类别定义了一个系列。单击图例中的系列时,该系列将隐藏起来。但如果该系列不在X轴的边缘,则该类别仍然可见。我希望删除不可见系列的X轴标签,但不将其从图例中删除。这样当它们在图例中再次被点击时它们就可以重新出现。2有什么方法可以完成这个任务吗?

我使用的是HighchartsReact from 'highcharts-react-official'。设置选项的代码如下:

const getHighChartsSeries = (columns: string[], tsvdata: tsvdata[]) => {
        const series = [];
        for (let serie in columns) {
            const seriedata: tsvdata = tsvdata.filter((m) => m.sample_id === columns[serie])[0];
            const seriesColors = getSeriesColors(seriedata.data.map((m) => Number(m.seq_freq)));
            const data = seriedata.data.map((sd, index) => {
                return {
                    x: Number(serie),
                    y: Math.round(Number(sd.seq_freq) * 10000) / 100,
                    name: sd.clone_id,
                    color: seriesColors[index],
                };
            });
            const serieEntry: Highcharts.SeriesOptionsType = {
                name: columns[serie],
                type: 'column',
                data: data,
                color: baseColor,
            };
            series.push(serieEntry);
        }
        return series;
    };

    const setHighChartsOptions= (tsvdata: tsvdata[]) => {
        const columns = tsvdata.map((item) => item.sample_id);
        const series = getHighChartsSeries(columns, tsvdata);
        const options: Highcharts.Options = {
            chart: {
                type: 'column',
                zoomType: 'xy',
            },
            title: {
                text: props.title,
            },
            xAxis: {
                showEmpty: false,
                categories: columns,
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage',
                },
            },
            tooltip: {
                headerFormat: '<b>{point.x}:</b><br/>',
                pointFormat: '<b>{point.name}:</b> {point.y} %<br/>',
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}',
                    },
                },
            },
            series: series,
            credits: {
                enabled: false,
            },
        };
        setOptions(options);
    };
webghufk

webghufk1#

首先,您需要使用legendItemClick来设置您的操作。

API参考:https://api.highcharts.com/highcharts/series.column.events.legendItemClick

如果您只想删除xAxis.labels,只需将其更新为labels.formatter

plotOptions: {
  column: {
    stacking: "normal",
    events: {
      legendItemClick: function () {
        let name = this.name;
        if (this.visible) {
          this.chart.update({
            xAxis: {
              labels: {
                formatter() {
                  if (this.value === name) {
                    return "";
                  } else {
                    return this.value;
                  }
                }
              }
            }
          });
        } else if (!this.visible) {
          this.chart.update({
            xAxis: {
              labels: {
                formatter() {
                  return this.value;
                }
              }
            }
          });
        }
      }
    }
  }
},

演示:https://codesandbox.io/s/highcharts-react-demo-forked-gcbz2g
API参考:https://api.highcharts.com/highcharts/xAxis.labels.formatter

如果要删除标签和隐藏类别留下的空间,则需要使用broken-axis.js模块

plotOptions: {
  column: {
    stacking: "normal",
    grouping: false,
    pointPlacement: null,
    events: {
      legendItemClick: function () {
        if (!this.visible) {
          breaks[this.index] = {};
          this.chart.xAxis[0].update({
            breaks: breaks
          });
        } else {
          breaks[this.index] = {
            from: this.xData[0] - 0.5,
            to: this.xData[0] + 0.5,
            breakSize: 0
          };
          this.chart.xAxis[0].update({
            breaks: breaks
          });
        }
      }
    }
  }
},

演示:https://codesandbox.io/s/highcharts-react-demo-forked-n502os?file=/demo.jsx:678-1453
API参考:https://api.highcharts.com/highcharts/xAxis.breaks

相关问题