Question

我有一张图表，显示人物，货币价值和百分比。

我想将百分比显示为数据标签而不是货币值。

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: false
                }
            },
        bar: {
            dataLabels: 
            {
                allowOverlap:true,
                enabled: true,
                align: 'right',
                overflow:"none",
                formatter: function() { return this.y;},
            }
        }            
        },
        xAxis: {
            categories: ["Mary<br/>$ 4,623,450","John<br>$     1,848,380","Jane<br/>$ 640,170"]
        },
        series: [{
            "data": [
                ["65%",4623450],
                ["26%", 1848380],
                ["9%", 640170]
            ],
            "name": "Session1"
        }]
    });
});

所以：玛丽的数据标签为65％而不是4623450， John的数据标签为26％而不是1848380， Jane的数据标签为9％而不是640170

有办法吗？

See jsfiddle here

Answer 1

解决！

简单如下：

formatter: function() { return this.key;},

完整代码：

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bar'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false
            }
        },
    bar: {
        dataLabels: 
        {
            allowOverlap:true,
            enabled: true,
            align: 'right',
            overflow:"none",
            formatter: function() { return this.y;},
        }
    }            
    },
    xAxis: {
        categories: ["Mary<br/>$ 4,623,450","John<br>$     1,848,380","Jane<br/>$ 640,170"]
    },
    series: [{
        "data": [
            ["65%",4623450],
            ["26%", 1848380],
            ["9%", 640170]
        ],
        "name": "Session1"
    }]
});

}）;

Updated jsfiddle here

需要将Highcharts数据标签设置为与y轴不同

1 个答案: