Javascript Angular5：根据数据在高图表中隐藏/显示yAxis
我正在使用Javascript Angular5：根据数据在高图表中隐藏/显示yAxis,javascript,angular,highcharts,show-hide,yaxis,Javascript,Angular,Highcharts,Show Hide,Yaxis,我正在使用angular5和angular highcharts库来显示图表。以下是我的工作图表，只是在没有数据打印时y轴不隐藏。当图形上没有要打印的数据时，是否有属性或方法可以隐藏y轴及其标签 this.chartConfig = { chart: { type: 'column', height: this.height,
angular5angular highchartsthis.chartConfig = {
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
max: 150,
ceiling: 150,
gridLineWidth: 0,
title: {
text: null
}
},
series: [],
};
//assign/bind the data here after the config is initialized
this.chartConfig.series = [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}];
//finally create the Chart object here with the config
this.chart = new Chart(this.chartConfig);
});
}
plotOptions: {
series: {
events: {
hide: function (event) {
//custom code here
},
show: function (event) {
//custom code here
}
}
}
}
在我看来，你在寻找： showEmpty：布尔值 轴没有数据时是否显示轴线和标题 默认为true 用法：
yAxis: {
showEmpty: false,
...
}
这些选项都不起作用，正如我问题的第一条评论中提到的，手动操作是有效的。我不知道这是否绝对是最干净的方式
//declare your flag to show/hide axis/labels globally
let showYAxisLabels:boolean;
this.chartConfig = {
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
max: 150,
ceiling: 150,
gridLineWidth: 0,
title: {
text: null
},
//add labels here and check based on your flag to show/hide
labels: {
formatter: function () {
//check your flag here to show/hide labels
if (this.showYAxisLabels) {
return this.value;
}
}
}
},
series: [],
};
//assign/bind the data here after the config is initialized
this.chartConfig.series = [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}];
//set your show/hide flag here based on your functionality
this.showYAxisLabels = this.showHideYAxisLabels(this.chartConfig.series[0].data);//pass the respective data set based on your requirement
//finally create the Chart object here with the config
this.chart = new Chart(this.chartConfig);
});
}
showHideYAxisLabels(data) {
//write your custom logic based on your requirement, following works
//for my requirement
if (_.filter(data, item => {
return (item as any).y !== null;
}).length > 0) {
//show labels and hence axis
return true;
} else {
//hide labels and hence axis
return false;
}
}
如果有更好/更干净的方法，请告诉我 不要试图操作highcharts中的数据，而是使用typescript方法从图表中获取数据，然后使用类似于以下问题的
.update（）