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

Question

我有一个当前图表，用于绘制当年的累计损益。 我想将每一列显示为绿色还是红色，具体取决于当天的损益是上升还是下降，但是我不确定如何在图表中完成此操作。

为此，我将必须将x轴设置为数据数组的一项，将y轴设置为另一项，并使用第三项来确定列颜色，因为数据以date，pnl，cumulativepnl数组的形式进入。 当前要显示图表，我将数据设置如下：

 // 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
            }]
        });
    }

Answer 1

在这里创建数据数组：

        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'
        });