![](/img/trans.png)
[英]How to add vertical lines to graph with HighStocks or HighCharts?
[英]How to draw vertical lines on Highcharts graph?
我正在使用 Highcharts,我想在值上绘制垂直线。 像;
我怎样才能做到这一点 ? 谢谢。
这是我的代码
<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>
您很可能必须使用Highcharts 渲染器来执行此任务,因为您想要执行的操作不太适合网格,也不太适合绘图线。
我根据您的代码制作了一个非常简单的示例,该示例显示在硬编码位置绘制任意垂直线。 为了实现您的目标,您必须计算一些事情,例如每条线起点的 x/y 位置,以及基于该点值的线高度。
这是一个略有不同的示例,其中包含 zIndex 和您实际需要的一条线,使用V
路径命令绘制一条垂直线。
我想您可能正在寻找绘图带和/或绘图线。
以下是更多信息:
http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
试试这个jsFiddle 。 来自Highcharts API 。
如果您想要任何一行(以及从该行开始的区域):
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
}],
}
解决方案是在类型column
包含一个新系列,并向该系列添加与包含该点的其他系列相同的数据。
{
/* Column type */
type: 'column',
name: '',
data: [],
color: '#ED1C24',
pointWidth: 2,
showInLegend: false,
states: { hover: { enabled: false } }
}
使用此 JSFiddle 作为指南: http : //jsfiddle.net/NDpu6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.