目前,我正在研究海图雷达图。因此,在tickInterval
中提供yAxis
值时,不会按照给定值进行绘制。我在评论中完全提到了该错误。请引用。这是我的fiddle
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
//providing tickInterval '1' is not working
//but providing tickInterval '2' is working
tickInterval: 1
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
提前致谢。
最佳答案
因此,这是一个好问题,并且tickInterval
中的highcharts所做的工作是根据用户给定的值计算tickInterval并将其四舍五入以提高可读性。
但是,可以使用tickPositioner解决您的问题。
您可以这样指定自己的轴值:
yAxis: {
tickPositions: [1, 2, 3, 4, 5],
}
这是工作的jsFiddle
您还可以像这样为tickPositioner编写自定义函数
var ticks = [];
for(var i=0;i<10;i++){
ticks.push(i+1);
}
yAxis: {
tickPositions: ticks
}
这是jsFiddle