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

Question

我有一个当前图表，其中绘制了当年的累计损益。我想将每个单独的列显示为绿色或红色，具体取决于当天的损益是上升还是下降，但我不确定如何在 highcharts 中实现此目的。

为了做到这一点，我必须将 x 轴设置为数据数组的一项，将 y 轴设置为另一项，并使用第三项来确定列颜色，因为数据以日期数组的形式出现，盈亏，累计盈亏。目前为了显示图表，我设置的数据如下；

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