我有一个包含列和线的图表。我使用 plotlines 为折线图添加了一条平均线。
我的问题是线条的数据标签与情节线文本重叠。我在这里重现了错误(见最后一个数据标签)。 : http://jsfiddle.net/cs8bqumy/
我可以在最后一列之后添加一些填充来纠正这个问题吗?
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
height: 400
},
title: {
text: null
},
xAxis: [{ // Suppier names xAxis
categories: ['A','B','C','D','E','F','G','H','I','J'],
labels: { rotation: -90 }
}],
yAxis: [{ // Primary yAxis (Sales)
title: {
text: '<span class="axis-label">Sales Value (AED)</span>',
useHTML: true,
style: {
color: '#89A54E'
}
},
min: 0,
max: 190234
}
, { // Secondary yAxis (Margin %)
title: {
text: '<span class="axis-label">Margin</span>',
useHTML: true
},
labels: {
format: '{value}%'
},
opposite: true,
min: 0,
max: 22,
alignTicks: false,
gridLineWidth: 0,
plotLines : [{
value : 11.66000,
color : 'red',
dashStyle : 'shortdash',
width : 2,
label : {
text : '11.66%',
align: 'right',
style: {
color: 'red'
}
}
}]
}
],
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
plotOptions: {
series: { pointWidth: 25 },
column: { colorByPoint: true },
line: {
dataLabels: {
enabled: true,
format: '{y}%',
style: {
fontWeight: 'bold',
color: '#000000',
}
//style: 'background-color:rgba(255,0,0,0.5);'
//backgroundColor: '#FEFEFE',
//shadow: true
}
}
},
series: [{
name: 'Sales Value',
color: '#FFA500',
type: 'column',
data: [104833.6400,38023.0500,53165.2200,21674.0000,37098.4700,42679.6700,23127.3300,34588.5000,33380.0000,15453.0000],
tooltip: {
valuePrefix: 'AED'
}
}
, {
name: 'Margin After Discount (%)',
color: 'lightblue',
yAxis: 1,
data: [12.10,22.10,9.40,13.40,10.90,10.60,9.70,8.50,8.00,11.90],
tooltip: { valueSuffix: '%' }
}
]
});
});
最佳答案
您还可以设置 max
值,即 9.3
。
http://jsfiddle.net/cs8bqumy/2/
关于highcharts 数据标签与 plotlines 值重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26628548/