javascript 如何在 Highcharts 图形上绘制垂直线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10950784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw vertical lines on Highcharts graph?
提问by user198989
I am using Highcharts, I want to draw vertical lines on the values. Like;
我正在使用 Highcharts，我想在值上绘制垂直线。喜欢;
How can I do that ? Thanks.
我怎样才能做到这一点 ？谢谢。
Here is my code
这是我的代码
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area'
},
title: {
text: '<b> </b>'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ Highcharts.numberFormat(this.y, 0) +'</b>';
}
},
xAxis: {
categories: [
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat',
'Sun'
],
plotBands: [{ // visualize the weekend
from: 5.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
plotOptions: {
area: {
pointStart: 1,
marker: {
enabled: false,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Visit',
data: [946, 733, 764, 887, 832,1423]
}, {
name: 'Unique',
data: [746, 633, 664, 687,702,1266]
}]
});
});
});
</script>
回答by Jamiec
You will most likely have to use the Highcharts rendererfor this task, as what you want to do doesn't quite fit in with a grid, and doesn't quite fit in with plot lines.
您很可能必须使用Highcharts 渲染器来执行此任务，因为您想要执行的操作不太适合网格，也不太适合绘图线。
I have made a very simple example, based on your code which shows drawing an arbitrary vertical line, in a hard-coded location. To achieve your goal you will have to calculate a few things, such as the x/y position for the start point of each line, and the height of the line based on that points value.
我根据您的代码制作了一个非常简单的示例，该示例显示在硬编码位置绘制任意垂直线。为了实现您的目标，您必须计算一些事情，例如每条线起点的 x/y 位置，以及基于该点值的线高度。
Here's a slightly different examplewith zIndex and a line as you actually want it, using the Vpath command to draw a vertical line.
这是一个略有不同的示例，其中包含 zIndex 和您实际需要的一条线，使用Vpath 命令绘制一条垂直线。
回答by Sarhanis
I think you might be looking for Plot Bands and/or Plot Lines.
我想您可能正在寻找绘图带和/或绘图线。
Here's some more information:
以下是更多信息：
http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
回答by Nikita Shekhov
Try this jsFiddle. From Highcharts API.
试试这个jsFiddle。来自Highcharts API。
回答by Nikita Shekhov
If you want ony one line (and area starting from that):
如果您想要任何一行（以及从该行开始的区域）：
xAxis:{
plotLines: [{
color: 'red', // Color value
//dashStyle: 'solid', // Style of the plot line. Default to solid
value: + new Date(), // Value of where the line will appear
width: '2' // Width of the line
}],
plotBands: [{
color: '#FFFAFA', // Color value
from: +new Date(), // Start of the plot band
to: +new Date()+1000*24*3600*30, //30 days
}],
}
