栏上的Highchart图例

穆罕默德·萨拉马(Mohamad Salama)

在highchart中是否可以在每个列中添加图例,同时将每个库伦的值或标签保留在该列顶部(如所附图像),这是我在jsfiddle上的代码在此处输入链接描述 在此处输入图片说明

$('#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]
}]

});

雷因·哈希米(Raein Hashemi)

您可以使用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为一系列操作,名称20142015y: 30是标签应相对于列顶部放置的位置。这是一个DEMO

PS:问题在于每一列不能有两个数据标签。在本示例中,您必须设置顶部标签的位置(如我的回答中所述)或将其设置为底部标签的位置如您所见,每个示例中都有一些问题,但不能同时存在。然而,有可能是这样一种解决方法这个,但它不干净。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章