我是javascript的新手，所以对于highcharts。我被困在一项任务中很长一段时间。 我使用highchart API创建了一个highstock图表。我正在使用ajax调用获取数据并将其显示在highstock图表中。所有工作都很好，直到这里。我的页面可以选择重新创建图表，并以每周，每月和每季度的形式显示数据。为此，我在我的区域图表上使用数据分组，这里问题出现了。现在我想要的是如果用户选择，比如每周时段，那么所有备用的每周时段区域应该具有相反的颜色，例如，如果1st是深灰色那么第二个应该是浅灰色，然后第三个应该是深灰色，依此类推。 第二件事我想要每组数据之间的差距。 请注意，我在图表中有多个系列。 有没有办法做到这一点。谁能帮帮我吗。
这是我的代码
function line_chart() {
$.getJSON('http://<?php echo $location; ?>/js/highcharts/server_processing/issuer/tbldailyprice2.php?' + ticker, function (data) {
// Create the chatu b ajanrt
mychart = $('#container2').highcharts('StockChart', {
chart: {
events: {
load: function () {
chart = this;
if (period_name == 'default') {
chart.series[0].update({
dataGrouping: {forced: false,
enabled: false,
approximation: '',
units: [['day', [1]]],
}
});
} else if (period_name == 'Quarterly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {forced: true,
approximation: 'sum',
enabled: true,
units: [['month', [3]]],
},
});
} else
if (period_name == 'Monthly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
dataGrouping: {
approximation: 'sum',
forced: true,
enabled: true,
units: [['month', [1]]],
}
});
} else
if (period_name == 'Weekly') {
chart.series[0].update({
// stacking: 'percent',
enableMouseTracking: true,
tooltip: {
enabled: true
},
name: 'Periods',
type: 'area' ,
approximation: 'sum',
dataGrouping: {forced: true,
enabled: true,
approximation: 'sum',
units: [['week', [1]]],
}
});
}
$.getJSON('http://' + closeperiodsurl, function (newdata) {
chart.series[0].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=buy", function (newdata) {
chart.series[2].setData(newdata);
// series.setData(data);
});
$.getJSON('http://' + buys_sells_url + "&type=sell", function (newdata) {
chart.series[3].setData(newdata);
// series.setData(data);
});
}
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
}, tooltip: {
shared: false,
crosshairs: true,
formatter: function () {
var rV = null;
var symbol = '$';
var color;
var company = "?c=<?php echo $_REQUEST["c"] ?>";
var ticker_id = "&t=<?php echo $_REQUEST["t"] ?>";
if (this.series.name == 'Buy' || this.series.name == 'Sell' || this.series.name == 'Periods') {
var date = "&date=" + this.x;
if (this.series.name == 'Buy') {
color = '#0000FF';
} else if (this.series.name == 'Sell') {
color = '#FF0000';
}
$.ajax({
//dataType: "json",
url: '../js/highcharts/server_processing/issuer/trade_summary.php' + company + ticker_id + date,
async: false, // this will stall the tooltip
success: function (ajax) {
rV = ajax;
// converting currency values to symbols
var chek = rV.search("EUR");
var chek1 = rV.search("GBP");
var chek_minus = rV.search("-");
if (chek != -1) {
symbol = '\u00A3';
rV = rV.replace("EUR", "\u00A3");
} else if (chek1 != -1) {
rV = rV.replace("GBP", "\u20AC");
symbol = '\u20AC';
}
var split_text = rV.split('<br/>');
// changing the color of last row of tooltip for +ve and _ve values of net trades
if (chek_minus == -1) {
rV = split_text[0] + '<br/><span style="color:' + color + '">' + split_text[1] + '</span>';
} else {
rV = split_text[0] + '<br/><span style="color:#ff0000">' + split_text[1] + '</span>';
}
}
});
}
if (this.series.name == 'Periods') {
var date = "&date=" + this.x;
var transactions = '';
$.ajax({
//dataType: "json",
url: 'http://' + closeperiodsurl + date + '&action=hover',
async: false, // this will stall the tooltip
success: function (ajax) {
transactions = ajax;
}
});
var period_format = '';
if (period_name == 'Quarterly') {
period_format = period_name;
var s = '';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "1st Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "2nd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "3rd Quarter"
}
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "4th Quarter"
}
period_format = s + " " + Highcharts.dateFormat('%Y', this.x);
} else if (period_name == 'Monthly') {
period_format = Highcharts.dateFormat('%b %Y', new Date(this.x));
} else if (period_name = 'Weekly') {
var s = '';
if (Highcharts.dateFormat('%e', this.x) >= 1 && Highcharts.dateFormat('%e', this.x) <= 7) {
s = s + "1st Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 8 && Highcharts.dateFormat('%e', this.x) <= 14) {
s = s + "2nd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 15 && Highcharts.dateFormat('%e', this.x) <= 21) {
s = s + "3rd Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 22 && Highcharts.dateFormat('%e', this.x) <= 28) {
s = s + "4th Week"
}
if (Highcharts.dateFormat('%e', this.x) >= 29 && Highcharts.dateFormat('%e', this.x) <= 31) {
s = s + "5th Week"
}
period_format = s + " " + Highcharts.dateFormat('%b %Y', this.x);
}
return period_format + "<br/>" + transactions + "<br/>" + symbol + numberWithCommas(this.y) + " Repurchased";
} else
return (Highcharts.dateFormat('%e', new Date(this.x)) == '1') ? Highcharts.dateFormat('%est %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '2') ? Highcharts.dateFormat('%end %b %Y', new Date(this.x)) : ((Highcharts.dateFormat('%e', new Date(this.x)) == '3') ? Highcharts.dateFormat('%erd %b %Y', new Date(this.x)) : Highcharts.dateFormat('%eth %b %Y', new Date(this.x)))) + '<br/>' +
(this.series.name == 'Buy' || this.series.name == 'Sell' ? rV : '');
},
valueDecimals: 2
},
xAxis: {
lineColor: '#000',
lineWidth: 1,
type: 'datetime',
maxZoom: 3600000 * 24 * 30 * 2, // roughly 2 months
//maxZoom: 28 * 24 * 3600000, // fourteen days
maxPadding: 0.05
},
// Y AXIS - PRIMARY
yAxis: [{
//minorTickInterval: 'auto',
lineColor: '#000',
// max: 1000,
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: ''
}
}, {// Secondary yAxis
title: {
text: 'Close Periods',
max: 0.4,
min: 0.3,
gridLineColor: '#FFFFFF',
gridLineWidth: 0,
},
//labels:false,
opposite: true
}],
navigator: {
// hides the plotted line at bottom of the chart
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
plotOptions: {
series:{ pointPadding:0,
groupPadding:5,
pointWidth:25
}
},
series: [{
// CLOSE PERIOD
name: '',
maxPointWidth: 90,
color: '#c0c0c0',
yAxis: 1,
type: close_period_chart_type,
lineWidth: 1,
shadow: false,
fillOpacity: '0.85',
data: [],
dataGrouping: {
approximation: '',
enabled: false,
forced: false,
units: [['month', [1]]],
},
}, {
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2,
enabled: true
}
}, {
//BUYS
name: 'Buy',
//unit: '%',
color: '#ffffff',
type: 'scatter',
enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/buy.png)'
},
data: [],
tooltip: {
enabled: true
}
}, {
// SELLS
name: 'Sell',
//unit: '%',
color: '#ffffff',
type: 'scatter',
// enableMouseTracking: true,
marker: {
symbol: 'url(../img/highcharts/sell.png)'
},
data: [],
}],
});
});
}