[英]How to draw vertical lines on Highcharts graph?
I am using Highcharts, I want to draw vertical lines on the values.我正在使用 Highcharts,我想在值上绘制垂直线。 Like;
像;
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>
You will most likely have to use the Highcharts renderer for 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 example with zIndex and a line as you actually want it, using the V
path command to draw a vertical line.这是一个略有不同的示例,其中包含 zIndex 和您实际需要的一条线,使用
V
路径命令绘制一条垂直线。
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
Try this jsFiddle .试试这个jsFiddle 。 From Highcharts API .
来自Highcharts API 。
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
}],
}
The solution is to include a new series with the type column
and add the same data to this serie than the other serie that includes the point.解决方案是在类型
column
包含一个新系列,并向该系列添加与包含该点的其他系列相同的数据。
{
/* Column type */
type: 'column',
name: '',
data: [],
color: '#ED1C24',
pointWidth: 2,
showInLegend: false,
states: { hover: { enabled: false } }
}
Use this JSFiddle as guide: http://jsfiddle.net/NDpu6/使用此 JSFiddle 作为指南: http : //jsfiddle.net/NDpu6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.