我在highcharts中使用了三种图表类型Line，OHLC，Candlestick。我把这些选项保留在按钮中。我还在图表上绘制垂直和水平线。但问题是每当我更改图表类型时，对象（我的意思是垂直和水平线）应该保留在那里。但它刚刚焕然一新。我没有使用chart.redraw()功能。我只是在每次选择图表类型时调用该方法。无论如何，如果我更改图表，对象应该保留在那里吗？
function chart(type,printSma,linked,line,algo)
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : currecny
},
xAxis :{
ordinal: false,
minRange : 3600000,
},
yAxis : [{
offset: 0,
ordinal: false,
height:280,
labels: {
format: '{value:.5f}'
}
}],
chart: {
events: {
click: function(event) {
var ren = this.renderer;
//if(event.ctrlKey)
if(line_type=='vertical')
{
chartt ='';
axis_value='';
chartt = this.xAxis[0];
axis_value=event.xAxis[0].value;
$("#line_popup_vertical").show();
$('#save_line_vertical').click(function(event) {
var label=document.getElementById("line_label_vertical").value;
if(label!=null)
{
var id = 'vertLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_vertical").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_vertical").fadeOut();
});
}
/*else if(event.altKey)
{*/
else if(line_type=='horizontal')
{
chartt ='';
axis_value='';
chartt = this.yAxis[0];
axis_value=event.yAxis[0].value;
$("#line_popup_horizontal").show();
$('#save_line_horizontal').click(function(event) {
var label=document.getElementById("line_label_horizontal").value;
if(label!=null)
{
var id = 'horzLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
/*var label=prompt('Label for Horizontal Line');
if(label!=null)
{
//chart.yAxis[0].removePlotLine('horzLine');
var chart ='';
var id = 'horzLine' + Math.random();
chart = this.yAxis[0];
chart.addPlotLine({
value: event.yAxis[0].value,
dashStyle: 'shortdash',
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chart.removePlotLine(id);
}
},
});
}*/
line_type="";
document.getElementById("line_label_horizontal").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_horizontal").fadeOut();
});
}
//else if(clickDetected)
else if(line_type=='trend')
{
var x1=event.xAxis[0].value;
var x2 = this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 = this.yAxis[0].toPixels(y1);
/*ren.circle(x2, y2, 5).attr({
'stroke-width': 2,
stroke: 'red',
fill: '#636363',
zIndex: 3
}).add();*/
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
//this.series[1].remove();
this.addSeries({
type : 'line',
name : 'Trendline'+(j++),
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
//$("#horizontal").removeClass("horizontal_hover");
//$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
//$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#pointer").click();
}
}
if(all_points.length==2)
{
all_points=[];
}
},
},
},
plotOptions: {
line: {
events: {
click: function(event) {
this.remove();
}
}
},
series: {
events: {
click: function(event) {
//For Other Lines
if(line_type=='vertical')
{
chartt ='';
axis_value='';
chartt = this.xAxis;
axis_value=chartt.toValue(event.chartX);
$("#line_popup_vertical").show();
$('#save_line_vertical').click(function(event) {
var label=document.getElementById("line_label_vertical").value;
if(label!=null)
{
var id = 'vertLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_vertical").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_vertical").fadeOut();
});
}
else if(line_type=='horizontal')
{
chartt ='';
axis_value='';
chartt = this.yAxis;
axis_value=chartt.toValue(event.chartY);
$("#line_popup_horizontal").show();
$('#save_line_horizontal').click(function(event){
var label=document.getElementById("line_label_horizontal").value;
if(label!=null)
{
var id = 'horzLine' + Math.random();
chartt.addPlotLine({
value: axis_value,
color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
width: 2,
id: id,
label : {
text : label
},
events: {
click: function(e) {
//this.axis.removePlotLine(this.id);
chartt.removePlotLine(id);
}
},
});
}
line_type="";
document.getElementById("line_label_horizontal").value="";
$("#horizontal").removeClass("horizontal_hover");
$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#line_popup_horizontal").fadeOut();
});
}
//else if(clickDetected)
else if(line_type=='trend')
{
var x1=chartt.toValue(event.chartX);
//var x2 = this.xAxis[0].toPixels(x1);
var y1=chartt.toValue(event.chartY);
//var y2 = this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
//this.series[1].remove();
this.addSeries({
type : 'line',
name : 'Trendline'+(j++),
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
//$("#horizontal").removeClass("horizontal_hover");
//$("#vertical").removeClass("vertical_hover");
$("#trend").removeClass("trend_hover");
//$("#fibo").removeClass("fibo_hover");
$("#pointer").addClass("pointer_hover");
$("#pointer").click();
}
}
if(all_points.length==2)
{
all_points=[];
}
}
}
}
},
series : [
{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 2,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
$('#chart').find('input[name="selection"]').each(function(index, element) {
$(this).click(function(e) {
//console.log('I was clicked');
type=$(this).val();
printSma=true;
linked='primary';
period=15;
algo='SMA';
typ='trendline';
if(type=='line')
{
$(this).addClass("active_linee");
$("#ohlcc").removeClass("active_ohlcc");
$("#candlestickk").removeClass("active_candlestickk");
//$("#indicator_list").show();
//$("#indicator_list").removeClass('indicator_list_hover');
}
else if(type=='ohlc')
{
$(this).addClass("active_ohlcc");
$("#linee").removeClass("active_linee");
$("#candlestickk").removeClass("active_candlestickk");
//$("#indicator_list").hide();
//$("#indicator_list").removeClass('indicator_list_hover');
}
else if(type=='candlestick')
{
$(this).addClass("active_candlestickk");
$("#linee").removeClass("active_linee");
$("#ohlcc").removeClass("active_ohlcc");
//$("#indicator_list").hide();
//$("#indicator_list").removeClass('indicator_list_hover');
}
chart(type,printSma,linked,line,algo,typ);
});
});
});
<div id="chart" class="chart">
<!--<p>Select Chart Type : </p>-->
<div class="chart_type">
<div class="border_chart">
<input type="button" name="selection" value="candlestick" class="candlestickk" id="candlestickk" title="Candle Stick">
<input type="button" name="selection" value="ohlc" class="ohlcc" id="ohlcc" title="OHLC">
<input type="button" name="selection" value="line" class="linee" id="linee" title="Line">
</div>
</div>