2
Я хочу создать штрих-код с настраиваемыми горизонтальными линиями, чтобы показать средние контрольные показатели. Также есть метки, добавленные в эти строки, чтобы показать контрольный заголовок. Я получаю метки линий, как показано на следующем рисунке. BarchartВ ярких ярлыках очертания оси Y обрезаются
Также, если значение линии линии выходит за пределы графика, линия сюжета спрятана. Как обрабатывать этот случай в highchart? Ниже приведен код, который я использую.
$(function() {
$('#chartContainer').highcharts({
\t credits: {
\t enabled: false
\t },
\t colors: ['#3C791D','#BEBEBE','#7F7F7F'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Great', 'Neutral', 'Bad']
},
yAxis: {
title: {
text: ''
},
plotLines:[{
value:80,
color: '#000000',
width:2,
zIndex:4,
label:{
\t text:'XYZ Average: 80%',
\t align: 'right'
}
},{
value:60,
color: '#000000',
width:2,
zIndex:4,
label:{
\t text:'PQR Average: 60%',
\t align: 'right'
}
}]
},
legend: {
\t enabled : false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter:function() {
\t return this.y + '%';
}
},
colorByPoint: true,
enableMouseTracking: false
}
},
series: [{
\t type: 'column',
\t name: "s",
data: [70, 10, 40]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<html>
<body>
<div id="chartContainer"></div>
</body>
</html>
Highcharts автоматически не освободит место для этих этикеток, как некоторые другие. Вам нужно будет это самостоятельно учесть, либо путем позиционирования метки, либо путем увеличения пространства - я бы установил ** topMargin **, чтобы разрешить ярлык: http://api.highcharts.com/highcharts # chart.marginTop – jlbriggs