jQuery - 系列外的HighCharts标签（条形图） [英] jQuery - HighCharts Labels outside Series (Bar Chart)

问题描述

  $（function（）{
 $（'＃container'）。highcharts（{
图：{
 type：'bar'， 
 backgroundColor：null，
 width：360 
}，
 title：{
 text：null，
 style：{
 display：' none'
} 
}，
副标题：{
 text：null，
 style：{
 display：'none'
} 
}，
学分：{
启用：false 
}，
导出：{
启用：false 
}，
 xAxis ：{
类别：['猫1'，'猫2'，'猫3'，'猫4'，'猫5'，'猫6'，'猫7'，'猫8'，' Cat 9'，'Cat 10']，
 title：{
 text：null 
} 
}，
 y轴：{
 min：0， 
 max：10，
 gridLineWidth：0，
 minorGridLineWidth：0，
 title：{
 text：null 
}，
 labels：{
启用：false 
} 
}，
工具提示：{
启用：false 
}，
 plotOptions：{
 bar：{
 dataLabels：{
 enabled：true 
} 
}，
 series：{
 dataLabels：{
 crop：false，
启用：true，
y：-2，
内：false 
} 
} 
}，
系列：[{
 showInLegend：false ，
名称：''，
颜色：'#CCC'，
数据：[1,2,3,4.4,5,6,8,9,9,5.5] 
 
}] 
}）; 
}）; 
  

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

我似乎无法获取系列数据的标签总是出现在酒吧的右侧。
我已经浏览了所有的API，我似乎无法找到停止将文本移动到栏中的选项。

有没有人有任何想法为什么发生这种情况？
非常感谢您的时间！

解决方案

您错过了API中的一个选项 plotOptions.series.dataLabels.overflow （ API ）：

overflow：String

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

换句话说，您需要结合crop和overflow，像这样（ updated JSFiddle ）：

  plotOptions： {
 series：{
 dataLabels：{
 enabled：true，
 crop：false，
 overflow：'none'
} 
} 
} 
  

$(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/

I can't seem to get the labels of the series' data to always appear on the RIGHT of the bar. I have gone through all the API and I can't seem to find an option to stop the text from getting moved into the bar.

Does anyone have any idea why this is happening? Thank you very much for your time!

解决方案

You've missed one option in the API called plotOptions.series.dataLabels.overflow (API):

overflow: String

How to handle data labels that flow outside the plot area. The default is justify, which aligns them inside the plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the plot area, set crop to false and overflow to "none". Defaults to justify.

In other words, you need to combine crop and overflow, like this (updated JSFiddle):

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

这篇关于jQuery - 系列外的HighCharts标签（条形图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！