带有Highcharts的堆积柱形图。
我怎样才能实现这样的目标？
我在左侧和右侧使用了另外4个具有不同值的plotLines，但是问题是如何隐藏Y轴上Q1和Q2的值并仅显示plotLines？
码
Highcharts.chart('container', {
chart: {
type: "column",
margin: [100, 120, 30, 100],
height: 440,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: "transparent"
},
title: {
text: "",
align: "center",
x: -140,
y: 12,
floating: true,
style: {
fontSize: "23px",
fontWeight: "300"
}
},
xAxis: {
categories: ['Q1 2018', 'Q4 2017'],
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0
},
yAxis: {
title: {
text: "Bonus Criteria",
x: -45,
opposite: true,
},
title: {
text: ''
},
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0,
tickPosition: "outside",
labels: {
align: "left",
x: -30,
y: 0
},
lineWidth: 1,
plotLines: [
{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '10,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '20,000 ',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '30,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
}
]
},
plotOptions: {
legend: {
enable: false
},
series: {
stacking: 'normal'
},
column: {
colorByPoint: true
}
},
colors: [
'#05a0f0',
'#aaddfa',
],
series: [{
data: [29.9, 71.5]
}, {
data: [144.0, 176.0]
}, {
data: [70, 60]
}],
dataLabels: {
enabled: true
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
},
});
这是指向jsfiddle的内联链接。
最佳答案
使用以下方法来旋转yAxis标签：
yAxis: {
lables: {
enabled: false
},
...
}
然后将plotLines设置为左侧，如：
yAxis: {
plotLines: {
color: "black",
value: 120,
width: "2",
label: {
text: '0%', //Visible text
align: "left", //left axis
fontWeight: "bold",
fontSize: "16",
x: -30, // xAxis offset
y: 5
},
zIndex: 2
}
...
}
另外，我禁用了图例：
legend: {
enabled: false
}
这将使您获得与所追求的东西非常相似的东西。
Highcharts.chart('container', {
chart: {
type: "column",
margin: [100, 120, 30, 100],
height: 440,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: "transparent"
},
title: {
text: "",
align: "center",
x: -140,
y: 12,
floating: true,
style: {
fontSize: "23px",
fontWeight: "300"
}
},
legend: {
enabled: false
},
xAxis: {
categories: ['Q1 2018', 'Q4 2017'],
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0
},
yAxis: {
title: {
text: "Bonus Criteria",
x: -45,
opposite: true,
},
title: {
text: ''
},
tickWidth: 0,
gridLineWidth: 0,
tickLength: 0,
tickWidth: 0,
tickPosition: "outside",
labels: {
enabled: false,
align: "left",
x: -30,
y: 0
},
lineWidth: 1,
plotLines: [{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '5%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '10%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '15%',
align: "left",
fontWeight: "bold",
fontSize: "16",
x: -30,
y: 5
},
zIndex: 2
},{
color: "black",
// Average here
value: 120,
width: "2",
label: {
text: '0',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 2nd criteria for bonus
{
color: "green",
// Average here
value: 180,
width: "2",
label: {
text: '10,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 3rd criteria for bonus
{
color: "green",
// Average here
value: 240,
width: "2",
label: {
text: '20,000 ',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
},
// 4th criteria for bonus
{
color: "yellow",
value: 300,
width: "2",
label: {
text: '30,000',
align: "right",
fontWeight: "bold",
fontSize: "16",
x: 100,
y: 5
},
zIndex: 2
}
]
},
plotOptions: {
legend: {
enable: false
},
series: {
stacking: 'normal'
},
column: {
colorByPoint: true
}
},
colors: [
'#05a0f0',
'#aaddfa',
],
series: [{
data: [29.9, 71.5]
}, {
data: [144.0, 176.0]
}, {
data: [70, 60]
}],
dataLabels: {
enabled: true
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>'
},
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>工作示例：https://jsfiddle.net/ch17r8df/20/
关于javascript - Highcharts 堆积列栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49386615/