javascript - HighCharts 在条形图上放置标签

Question

鉴于下图 - 我想从每列的图例中获取标签并将其打印在列本身上。我无法在 HighCharts API 中找到任何可以让我执行此操作的内容。有没有人有这样的想法或例子我可以看看？

谢谢！

编辑

有一个更好的例子来说明我想要完成的事情

我认为这很容易辨别。用例是这些统计数据显示在呼叫中心周围的大型监视器上。图例通常太小而无法从任何给定距离读取。

Answer 1

只需尝试在柱形图上格式化数据标签，这里有一个示例可以帮助您入门。

 $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        color: '#000',
                        style: {fontWeight: 'bolder'},
                        formatter: function() {return this.x + ': ' + this.y},
                        inside: true,
                        rotation: 270
                    },
                    pointPadding: 0.1,
                    groupPadding: 0
                }
            },

            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        });
    });

Answer 2

真的，这个案例需要的是一个条形而不是一个列，以及不旋转的类别标签，并且清晰可读。

Example:

http://jsfiddle.net/jlbriggs/yPLVP/23/

您还可以偏移轴标签以将类别名称放在栏本身上，但实际上 - 它的显示方式不如上面的示例：

http://jsfiddle.net/jlbriggs/yPLVP/24/

当然，它们都可以是一列而不是条形，但是如果可以避免旋转标签，则始终是一个坏主意。

这些方法还允许数据标签在需要时仍用作数据标签。