Highcharts：当 siri 不可见时隐藏 xAxis 类别

Question

我有堆叠柱形图，我在其中为每个 xAxis 类别定义了一个系列。当我点击图例中的系列时，系列就会隐藏起来，这就是我想要的。但如果系列不在 X 轴的边缘，则类别仍然可见。我想删除不可见系列的 xAxis 标签而不从图例中删除它们，这样当它们在图例中再次单击时它们可以重新出现。关于如何完成此操作的任何想法？

我正在使用 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);
    };

Answer 1

首先，您需要使用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

如果你想删除标签和隐藏类别留下的space，你需要使用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

Highcharts：当 siri 不可见时隐藏 xAxis 类别

Highcarts: Hide xAxis categorie when serie is not visible

javascript

highcharts

reactjs