使用highcharts为条形图中的每个条形设置单独的颜色

set individual color for each bar in bar chart using highcharts

本文关键字:设置 颜色 单独 highcharts 条形图 使用      更新时间:2023-09-26

我有一个当前图表,在其中我绘制了一年的累计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'
        });