我有一张Highcharts图表,其中设置了最大x轴值。可以在以下网址看到:
我想要做的是为我的最大x轴设置标签。因此,在我的图表末尾显示100
时,我希望能够将其设置为随机字符串,例如butterfly
。我的x轴值设置为category
,所以我不在乎x轴显示数字。
我的JavaScript代码是这样的:
$('#container').highcharts({
xAxis: {
type: 'category',
max: 100
},
series: [{
data: [0, 1, 56, 32]
}]
});
不确定Highcharts中是否有允许我这样做的功能。
我想要实现这一目标的另一个选择是写出每个类别。就像我在这里:
然而,我希望实现这一点的方法不那么冗余,因为我只想改变尚未到达末尾的系列的最后x轴值(即最大x轴)。您将注意到,在我的两个示例中,数据点都没有到达x轴。
答案 0 :(得分:2)
你可以这样做
chart: {
events: {
load: function() {
//console.log(this.xAxis[0])
this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly"; //update last element of array
this.update({
xAxis: {
categories: this.xAxis[0].paddedTicks,
max: this.xAxis[0].tickPositions.length-1 //update chart max value to number of element in category array
}
})
}
}
},
注意整页演示将正确显示
$('#container').highcharts({
chart: {
events: {
load: function() {
this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";
//console.log(this.xAxis[0])
this.update({
xAxis: {
categories: this.xAxis[0].paddedTicks,
max: this.xAxis[0].tickPositions.length-1
}
})
}
}
},
xAxis: {
type: 'category',
max: 100
},
series: [{
data: [0, 1, 56, 32]
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
Fiddle演示