列上的 Highchart 图例

Question

是否可以在 highchart 中添加每列中的图例并保持列顶部每个列的值或标签，如附加图像，这是我在 jsfiddle enter link description here 上的代码

$('#container').highcharts({
"chart": {
    "type": "column",
        "style": {
        "fontFamily": "Arial",
            "fontSize": 12
    },
        "backgroundColor": "transparent",
        "width": 460
},

    "plotOptions": {
    "series": {
        "dataLabels": {
            "enabled": true,
                "format": "${y}"
        },
            "pointPadding": 0,
            "groupPadding": 0.1
    }
},
    "xAxis": [{

    "categories": [
        "Jan",
        "Feb",
        "Mar"],

}],

    "series": [{
    "name": "2014",
        "color": "#231E1E",
        "marker": {
        "radius": 3
    },
        "showInLegend": true,
        "connectNulls": true,
        "tooltip": [

    ],
        "data": [
    10,
    20,
    30]
}, {
    "name": "2015",
        "color": "#1DBEDE",
        "marker": {
        "radius": 3
    },
        "showInLegend": true,
        "connectNulls": true,
        "tooltip": [

    ],
        "data": [
    12,
    22,
    32]
}]

});

Answer 1

您可以使用 plotOptions.series.dataLabels.formatter 代替 format:

dataLabels: {
    enabled: true,
    useHTML: true,
    y: 30,
    formatter: function() {
        return "$" + this.y + "<br><br><br>" + 
               "<div style='-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);'>" +
               this.series.name + "</div>";
    }
}

您可以准确地告诉图表您希望标签显示的方式。 this.y 是美元价值，this.series.name 是系列名称，2014 和 2015。 y: 30 是标签相对于列顶部的放置位置。这是 DEMO.

PS：问题是您不能为每一列设置两个数据标签。您必须设置顶部标签的位置（如我的回答中所述）或在此 example. As you can see there are some problems in each example, but you can't have both. However there could be a workaround like this 中将其设置为底部标签，但它不干净。

Answer 2

您可以尝试使用stackLabels。当然，该解决方案仅在您根本不使用堆叠时才有效。见演示：http://jsfiddle.net/LLExL/4855/

代码：

yAxis: {
    stackLabels: {
        enabled: true,
        formatter: function() {
            return "$" + this.total;  
        }
    }
},
"plotOptions": {
    "series": {
        stacking: "normal",
        "dataLabels": {
            "enabled": true,
            rotation: -90,
            "format": "{point.series.name}"
        },
        "pointPadding": 0,
        "groupPadding": 0.1
    }
},

关于将标签对齐到底部，请参阅 this question。

Answer 3

我对@Raeen 的解决方案进行了一些更改，使其完全符合我的要求这是示例 demo

enter code jQuery('#container').highcharts({
"chart": {
    "type": "column",
        "style": {
        "fontFamily": "Arial",
            "fontSize": 12
    },
        "backgroundColor": "transparent",
        "width": 460
},
title:{
  text:''
},
tooltip: {
        enabled: false
    },

    "plotOptions": {
        "series": {
            "dataLabels": {
                "inside":true,
                "enabled": true,
                useHTML: true,
                y: 30,
                formatter: function() {
                  var html ='';
                  labelHeight = this.point.shapeArgs.height-15;
                  html += '<div class="data-label-wrapper" style="height:'+labelHeight+'px;">';
                  html += '<span style="color:'+this.series.color+';">$'+this.y+'</span>';
                  html += '<span class="serie-name" style="top:'+(labelHeight-25)+'px">'+this.series.name+'</span>';
                  html += '</div>';
                 return html ;
                }
            },
                "pointPadding": 0,
                "groupPadding": 0.1
        }
},
    "xAxis": [{

    "categories": [
        "Jan",
        "Feb",
        "Mar"],

}],

    "series": [{
    "name": "2014",
        "color": "#231E1E",
        "marker": {
        "radius": 3
    },
        "showInLegend": false,
        "connectNulls": true,
        "tooltip": [

    ],
        "data": [
    10,
    20,
    30]
}, {
    "name": "2015",
        "color": "#1DBEDE",
        "marker": {
        "radius": 3
    },
        "showInLegend": false,
        "connectNulls": true,
        "tooltip": [

    ],
        "data": [
    12,
    22,
    32]
}] });

如果可以控制网格线的数量，现在我需要什么像 3 而不是 8 那将是完美的。

列上的 Highchart 图例

Highchart legend over columns

legend

highcharts