使用highcharts为条形图中的每个条形设置单独的颜色
set individual color for each bar in bar chart using highcharts
我有一个当前图表,在其中我绘制了一年的累计p&L.我想根据当天的P&L是上升还是下降,但我不知道如何在高点内完成这一点。
为了做到这一点,我必须将x轴设置为数据数组的一项,将y轴设置为另一项,并使用第三个来确定列颜色,因为数据以日期、pnl和累积pnl的数组形式出现。当前要显示的图表我设置的数据如下;
// split the data set into date and cumulativepnl
var pnldata = [],
dataLength = data.length;
for (var i = 0; i < dataLength; i++) {
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1] is the day's pnl
]);
}
该系列设置如下:;
series: [{
type: 'column',
data: pnldata
}]
我不知道如何将x轴和y轴的数据分开,以及如何设置每一列的颜色。
解决方案:数据阵列需要更改,以便在那里设置颜色(根据Pawels的回答)
var pointColor;
for (var i = 0; i < dataLength; i++) {
if (data[i][1] >= 0) {
pointColor='#008000';
} else {
pointColor='#FF0000';
}
pnldata.push({
x: data[i][0], // the date
y: data[i][2], // cumulativepnl data[i][1] is the day's pnl
color:pointColor
});
}
这是整个函数的代码;
function showColumnChart(data, selector,acctname) {
// split the data set into date and cumulativepnl
var pnldata = [],
dataLength = data.length;
var yr = moment().year(data[1][0]);
for (var i = 0; i < dataLength; i++) {
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1], // pnl
]);
}
selector.highcharts({
chart: {
borderColor: null,
borderWidth: null,
type: 'line',
plotBackgroundColor: '#E5E4E2',
plotBorderColor: '#0000A0',
plotBorderWidth: 2,
plotShadow: false
},
plotOptions: {
column: {
colorByPoint: true
}
},
title: {
text: 'Cumulative P&L for ' + yr,
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'italic'
}
},
subtitle: {
text: 'Account: ' + acctname,
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '11px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'italic'
}
},
lineWidth: 2,
xAxis: {
type: 'datetime',
labels: {
align: 'right',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
},
rotation:-60
},
tickInterval:480 * 3600 * 1000
},
yAxis: {
title: {
text: 'Cumulative P&L',
style: {
color: '#0000A0',
fontWeight: 'bold',
fontSize: '11px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
}
},
labels: {
align:'right',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, sans-serif',
fontStyle: 'normal'
},
format: '$ {value}'
}
},
credits: {
enabled:false
},
legend: {
enabled: false
},
series: [{
type: 'column',
data: pnldata
}]
});
}
这是创建数据数组的地方:
pnldata.push([
data[i][0], // the date
data[i][2] // cumulativepnl data[i][1] is the day's pnl
]);
您需要从数组更改为对象,这样您就可以设置单独的颜色,例如:
pnldata.push({
x: data[i][0], // the date
y: data[i][2], // cumulativepnl data[i][1] is the day's pnl
color: 'someColor'
});
相关文章:
- 使用谷歌图表在条形图中设置颜色
- 如何在javascript中设置颜色转换
- 如何设置颜色'清除'转换为RGB或HEX
- 引导颜色选择器,如何在下拉列表中设置颜色值框
- 引导 NAV 方式在移动设备中折叠或展开时设置颜色样式
- 根据特定列中的值为 FlexiGrid 行设置颜色
- jQuery调用来设置颜色
- 在更改角度数组时设置
颜色 - 像老板一样根据数据在 D3 中设置颜色
- JS设置颜色选择器值
- jPicker设置颜色
- 在JavaScript中动态设置颜色
- 初始化后如何在光谱调色板中设置颜色
- 在paper.js中设置颜色动画
- 当单击特定按钮时,在数据库中设置颜色
- Javascript如何传递变量和设置颜色
- 巧妙地设置颜色
- 我如何在谷歌图表设置颜色范围
- D3 if/else设置颜色
- 平行坐标:根据尺寸值设置颜色