我创建了一个 highcharts 气泡图,如下所示:
如果可能的话,我希望 a 轴网格线位于气泡的中间。
有没有办法实现这个?
代码如下:
$(function () {
var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' },
{ x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' },
{ x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' },
{ x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' },
{ x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' },
{ x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' },
{ x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' },
{ x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: false,
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 1,
title: {
text: ''
},
categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8']
},
yAxis: {
startOnTick: true,
min: 0,
max: 7,
title: {
text: 'Score'
},
labels: {
format: '{value}'
},
maxPadding: 0.2
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' +
'<tr><th>Score:</th><td>{point.y}</td></tr>' +
'<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{ data: data }]
});
});
最佳答案
您可以使用 tickmarkPlacement
option :
xAxis: {
tickmarkPlacement: 'on'
}
For categorized axes only. If
on
the tick mark is placed in the center of the category, ifbetween
the tick mark is placed between categories. The default isbetween
if thetickInterval
is 1, elseon
. Defaults tonull
.
参见 this updates JSFiddle举个例子。
关于javascript - Highcharts - 气泡图 - 移动网格线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37252421/