在highcharts中对面积图进行数据分组时显示其他颜色
我对javascript和highcharts都是新手。我被困在一项任务中很长时间了。 我已经使用highchart API创建了highstock图表。我使用ajax调用获取数据，并将其显示在highstock图表中。到这里为止一切都很好。我的页面可以选择重新创建图表，以周、月和季度的形式显示数据。为此，我在我的区域图上使用了数据分组，这里出现了问题。现在我想要的是，如果用户选择，比如说每周周期，那么所有交替的每周周期区域应该有相反的颜色，例如，如果第一个区域是深灰色，那么第二个区域应该是浅灰色，然后第三个区域应该是深灰色，等等。 第二件事，我希望各组数据之间存在差距。 请注意，我在图表中有多个系列。 有没有办法做到这一点。谁能帮帮我吗 这是我的密码在highcharts中对面积图进行数据分组时显示其他颜色,highcharts,Highcharts,我对javascript和highcharts都是新手。我被困在一项任务中很长时间了。 我已经使用highchart API创建了highstock图表。我使用ajax调用获取数据，并将其显示在highstock图表中。到这里为止一切都很好。我的页面可以选择重新创建图表，以周、月和季度的形式显示数据。为此，我在我的区域图上使用了数据分组，这里出现了问题。现在我想要的是，如果用户选择，比如说每周周期，那么所有交替的每周周期区域应该有相反的颜色，例如，如果第一个区域是深灰色，那么第二个区域应该是浅灰
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: [],
}],
});
});
}
功能行\u图表（）{
$.getJSON（'http:///js/highcharts/server_processing/issuer/tbldailyprice2.php?“+股票代码，功能（数据）{
//创建chatu b Ajannrt
mychart=$（“#container2”）。highcharts（'StockChart'{
图表：{
活动：{
加载：函数（）{
图表=这个；
如果（句点名称=='default'）{
chart.series[0]。更新({
数据分组：{forced:false，
启用：false，
近似值：“”，
单位：[天]，[1]]，
}
});
}else if（期间名称=‘季度’）{
chart.series[0]。更新({
//堆叠：“百分比”，
enableMouseTracking：正确，
工具提示：{
已启用：true
},
名称：'句点'，
类型：'区域'，
数据分组：{forced:true，
近似值：“和”，
启用：对，
单位：[‘月’，[3]]，
},
});
}否则
如果（期间名称=‘每月’）{
chart.series[0]。更新({
//堆叠：“百分比”，
enableMouseTracking：正确，
工具提示：{
已启用：true
},
名称：'句点'，
类型：'区域'，
数据分组：{
近似值：“和”，
是的，
启用：对，
单位：[‘月’，[1]]，
}
});
}否则
如果（时段名称=='每周'）{
chart.series[0]。更新({
//堆叠：“百分比”，
enableMouseTracking：正确，
工具提示：{
已启用：true
},
名称：'句点'，
类型：'区域'，
近似值：“和”，
数据分组：{forced:true，
启用：对，
近似值：“和”，
单位：[[每周]，[1]]，
}
});
}
$.getJSON（'http://'+closeperiodsurl，函数（newdata）{
chart.series[0].setData（newdata）；
//系列。设置数据（数据）；
});
$.getJSON（'http://'+buys\u sells\u url+“&type=buy'，函数（newdata）{
chart.series[2].setData（newdata）；
//系列。设置数据（数据）；
});
$.getJSON（'http://'+buys\u sells\u url+“&type=sell'，函数（newdata）{
chart.series[3].setData（newdata）；
//系列。设置数据（数据）；
});
}
}
},
范围选择器：{
选定：1
},
标题：{
文本：“AAPL股价”
}，工具提示：{
分享：错，
十字准星：没错，
格式化程序：函数（）{
var-rV=null；
变量符号=“$”；
颜色变异；
var公司=