Question

我有一张当前图表，用于绘制年度累计P＆amp; L.我想将每个列显示为绿色或红色，具体取决于当天的P＆amp; L是否上升或下降，但我不确定如何在highcharts中完成此操作。

为了做到这一点，我必须将x轴设置为数据数组的一个项目，将y轴设置为另一个项目，并使用第三个确定列颜色，因为数据作为日期数组输入， 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'
        });

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

1 个答案: