Question

我写了以下图表：

monthlyColumnChart = Highcharts.chart('MonthlyColumnChart', {
        chart: {
            type: 'column',
            events: {
                load: function (event) {
                    var theSeries = this.series[1];
                    var theCompSeries = this.series[0];
                    var theData = theSeries.data;
                    var theCompData = theCompSeries.data;

                    for (var i = 0; i < theData.length; i++) {
                        var theDataPoint = theData[i].y
                        var theCompDataPoint = theCompData[i].y;
                        if (theData[i].y < theCompData[i].y) {
                            theSeries.points[i].update({
                                color: '#94d200',
                            });
                        } else {
                            theSeries.points[i].update({
                                color: '#d34810',
                            });
                        }

                    }
                }
            },

            height: 450,
            marginTop: 60,
            spacingBottom: 30,
        },
        exporting: {
            enabled: false
        },
        credits: {
            href: " ",
            text: " "
        },
        title: {
            align: 'left',
            verticalAlign: 'bottom',
            useHTML: true,
            x: -10,
            y: 25,
            style: {
                color: 'white',
                'background-color': '#94d200',
                fontWeight: 'bold',
                fontSize: '14px',
            },
            text: '&nbsp &nbsp Consumptionoverview current year &nbsp &nbsp &nbsp '
        },
        xAxis: {
            categories: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        },
        yAxis: [{
            min: 0,
            title: {
                text: 'kWh'
            }
        }],
        legend: {
            align: 'center',
            enabled: true,
            floating: true,
            verticalAlign: 'top',
            y: 10,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            shadow: false
        },
        tooltip: {
            shared: true,
            valueDecimals: 2
        },
        plotOptions: {
            column: {
                grouping: false,
                shadow: false,
                borderWidth: 0
            },

        },
        series: [{
            name: '\u2205 Consumption (kWh)',
            color: 'rgba(152,152,152,1)',
            data: [10,12,11,10,14,12,11,9,17,12,13,11],
            animation: {
                duration: 1000,
                easing: 'easeOutBounce',
            },
        }, {
            name: 'Consumption (kWh)',
            color: '#94d200',
            pointPadding: 0.2,
            pointPlacement: 0.1,
            data: [9,8,13,14,14,14,14,14,14,14,14,9],
            animation: {
                duration: 1000,
                easing: 'easeOutBounce',
            },
        }]
    });

http://jsfiddle.net/h6r5pb0e/8/

如您所见，根据值的高度，我有两个系列和一个带有两种可能的颜色的系列（请参见chart.event）。自动生成的图例具有两个系列，但仅具有一种颜色（列的默认颜色）。我需要的是第二种颜色的附加图例项目，包括颜色和说明。有没有办法手动添加此图例项目？

具有其他图例元素的Highchart柱形图

0 个答案: