关于 highstock：使用 highcharts.js 绘制平行于 x 轴的水平线

highchartshighstock

Drawing horizontal lines parallel to x axis using highcharts.js

下面是帕累托图的小提琴。我想画一条平行于 x 轴的水平线，它从左到右跨越并在 y 轴上的 80% 标记处结束。我想在绘制帕累托图时总是这样做。

能否告诉我是否有办法动态执行此操作？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title:{
text:'Pareto Test 1'
},
legend:{

},
tooltip:{
formatter:function(){
if(this.series.name == 'Line'){
var pcnt = Highcharts.numberFormat((this.y / 415 * 100),0,'.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow:false,
}
},
xAxis:{
categories:['A','B','C','D','E','F','G','H'],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title',
style:{
color:'#000'
}

}
},
yAxis:[{
min:0,
//endOnTick:false,
//lineColor:'#999',
lineWidth:1,
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
},{
title:{text:''},
//alignTicks:false,
gridLineWidth:0,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
tickInterval:415 / 20,
endOnTick:false,
opposite:true,
linkedTo:0,
labels:{
formatter:function(){
var pcnt = Highcharts.numberFormat((this.value / 415 * 100),0,'.');
return pcnt + '%';
}
}
}],
series: [{
//yAxis:0,
data: [115,75,60,55,45,30,20,15],
},{
type:'line',
name:'Line',
//yAxis:0,
data: [115,190,250,305,350,380,400,415],
}]
});

1	<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js">

您可以按照计算 80% 的方法进行设置。请参阅下面的小提琴。这是一些添加 plotLines 的示例代码：

1
2
3
4
5

plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
borderWidth: 1,
borderColor: '#ccc',
marginLeft: 110,
marginRight: 50,
//backgroundColor:'#eee',
//plotBackgroundColor:'#fff',
},
title: {
text: 'Pareto Test 1'
},
legend: {

},
tooltip: {
formatter: function() {
if (this.series.name == 'Line') {
var pcnt = Highcharts.numberFormat((this.y / 415 * 100), 0, '.');
return pcnt + '%';
}
return this.y;
}
},
plotOptions: {
series: {
shadow: false,
}
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#000'
}

}
},
yAxis: [{
min: 0,
//endOnTick:false,
//lineColor:'#999',
lineWidth: 1
//tickColor:'#666',
//tickWidth:1,
//tickLength:3,
//gridLineColor:'#ddd',
/* title:{
text:'Y Axis Title',
rotation:0,
margin:50,
style:{
color:'#000'
}
}*/
}, {
title: {
text: ''
},
//alignTicks:false,
gridLineWidth: 0,
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
tickInterval: 415 / 20,
endOnTick: false,
opposite: true,
linkedTo: 0,
labels: {
formatter: function() {
var pcnt = Highcharts.numberFormat((this.value / 415 * 100), 0, '.');
return pcnt + '%';
}
},
plotLines: [{
color: '#FF0000',
width: 2,
value: .80 * 415 // Need to set this probably as a var.
}]
}],
series: [{
//yAxis:0,
data: [115, 75, 60, 55, 45, 30, 20, 15]
}, {
type: 'line',
name: 'Line',
//yAxis:0,
data: [115, 190, 250, 305, 350, 380, 400, 415]
}]
});

1	<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js">

相关讨论

你要看的是情节线：

http://api.highcharts.com/highcharts#yAxis.plotLines

{{编辑：

另外，在这里寻找稍微改进的动态获取数据总和的方法：
Highcharts 简单条形图占总数的百分比

相关讨论