列

Question

是否可以在高图中添加每个列中的图例并保留 列顶部的每个coulmn的值或标签，如附加图像，这是我在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中的底部标签。正如您所看到的，每个示例中都存在一些问题，但您不能同时拥有这两个问题。但是，可能会有像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才是完美的。