【问题标题】:jQuery - HighCharts Labels outside Series (Bar Chart)jQuery - 系列外的 HighCharts 标签(条形图)
【发布时间】:2014-07-19 21:56:02
【问题描述】:
$(function () {
$('#container').highcharts({
        chart: {
            type: 'bar',
            backgroundColor: null,
            width: 360
        },
        title: {
            text: null,
            style: {
                display: 'none'
            }
        },
        subtitle: {
            text: null,
            style: {
                display: 'none'
            }
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        xAxis: {
            categories: ['Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5', 'Cat 6', 'Cat 7', 'Cat 8', 'Cat 9', 'Cat 10'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        tooltip: {
            enabled: false
        },  
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    crop: false,
                    enabled: true,
                    y: -2,
                    inside: false
                }
            }
        },
        series: [{
            showInLegend: false,
            name: '',
            color: '#CCC',
            data: [1, 2, 3, 9.4, 5, 6, 8, 9, 9, 9.5]

    }]
});
});

jsfiddle:http://jsfiddle.net/uNrW2/1/

我似乎无法让系列数据的标签始终出现在栏的右侧。 我已经浏览了所有 API,但似乎找不到阻止文本移动到栏中的选项。

有人知道为什么会这样吗? 非常感谢您的宝贵时间!

【问题讨论】:

    标签: jquery charts highcharts


    【解决方案1】:

    您在 API 中遗漏了一个名为 plotOptions.series.dataLabels.overflow (API) 的选项:

    溢出:字符串

    如何处理在绘图区域之外流动的数据标签。默认值为justify,将它们对齐在绘图区域内。对于列和条,这意味着它将在条内移动。要在绘图区域外显示数据标签,请将crop 设置为false 并将overflow 设置为"none"。默认为 justify。

    换句话说,你需要结合裁剪和溢出,像这样 (updated JSFiddle):

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
        }
    }
    

    【讨论】:

    • 非常感谢 Ondkloss!我没想到溢出会解决这个问题,而且那个 API 是如此巨大,有如此多的选择。这正是我要找的,谢谢你的回答!
    • 我能问你最后一个问题吗,如果值为10,它只会显示第一个数字,如果是10,有没有办法将值向左移动一点?
    • 通过更改 yAxis{max:11.. 它可以工作 jsfiddle.net/robschmuecker/uNrW2/3
    • 非常感谢@Rob-Schmuecker
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-22
    相关资源
    最近更新 更多