【发布时间】：2018-03-20 14:14:48
【问题描述】：
带有 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: {labels: {enabled: false},...}。这就是你所追求的：jsfiddle.net/ch17r8df/14？ -
谢谢！差不多好了。那么我如何在左侧显示另一个绘图值而不是 yAxis 标签？例如：0 - 0%； 10,000 - 5% ?
标签： javascript angular charts highcharts