在堆积柱形图中,为每个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);
};
1条答案
按热度按时间webghufk1#
首先,您需要使用
legendItemClick
来设置您的操作。API参考:https://api.highcharts.com/highcharts/series.column.events.legendItemClick
如果您只想删除
xAxis.labels
,只需将其更新为labels.formatter
:演示:https://codesandbox.io/s/highcharts-react-demo-forked-gcbz2g
API参考:https://api.highcharts.com/highcharts/xAxis.labels.formatter
如果要删除标签和隐藏类别留下的空间,则需要使用
broken-axis.js
模块演示:https://codesandbox.io/s/highcharts-react-demo-forked-n502os?file=/demo.jsx:678-1453
API参考:https://api.highcharts.com/highcharts/xAxis.breaks