条形图上的标签丢失 [英] Labels on bar chart missing

问题描述

如何确保所有条形标签都可见?该图表显示了其他所有标签.还要注意，其他所有条上也缺少数字标签.这是字体大小问题还是其他问题?

How do I go about ensuring that all of the labels for the bars are visible? This chart is showing every other label. Notice as well, that the numeric labels are missing on every other bar as well. Is this a font size issue, or something else?

http://jsfiddle.net/brookssh/a0xdsc3q/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "chartContainer",
        defaultSeriesType: 'bar',
        height: 595
    },
    title: {
        text: '18 York Street Consumption (RankIt)',
        style: {
            color: '#484a4a',
            fontSize: '22px',
            fontFamily: 'Arial, Helvetica, sans-serif',
            fontWeight: 'bold'
        }
    },
    subtitle: {
        text: 'Saturday, August 15 2015 through Sunday, August 16 2015'
    },
    credits: {
        enabled: false
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: "Test",
            style: {
                color: '#0063A2',
                fontFamily: 'Arial, Helvetica, sans-serif',
                fontWeight: 'bold'
            }
        },
        plotLines: [{
            color: 'red', // Color value                            
            value: null, // Value of where the line will appear
            width: 2 // Width of the line    
        }],
        min: 0
    },
    xAxis: [{
        categories: ['9th Floor Total kWh', '9th Floor', '8th Floor Lighting Total kWh', '8th Floor', '7th Floor Lighting Total kWh', '7th Floor', '6th Floor Total kWh', '5th Floor Total kWh', '5th Floor', '4th Floor Total kWh', '4th Floor', '3rd Floor Total kWh', '3rd Floor', '26th Floor Total kWh', '26th Floor', '25th Floor Total kWh', '25th Floor', '24th Floor Total kWh', '24th Floor', '23rd Floor Total kWh', '23rd Floor', '22nd Floor Total kWh', '22nd Floor', '21st Floor Total kWh', '21st Floor', '20th Floor Total kWh', '20th Floor', '19th Floor Total kWh', '19th Floor', '18th Floor Total kWh', '18th Floor', '17th Floor Total kWh', '17th Floor', '16th Floor Total kWh', '16th Floor', '15th Floor Total kWh', '15th Floor', '14th Floor Total kWh', '14th Floor', '13th Floor Total kWh', '13th Floor', '12th Floor Total kWh', '12th Floor', '11th Floor Total kWh', '11th Floor', '10th Floor Total kWh', '10th Floor'],
        title: {

        },
        type: 'category',
        plotBands: [{
            color: '#DDECFF',
            from: 1439571600000,
            to: 1439744400000
        }],
        plotLines: [{
            color: 'grey', // Color value                            
            dashStyle: "dash",
            value: null, // Value of where the line will appear
            width: 0 // Width of the line    
        }],
    }, {
        labels: {
            rotation: -45,
            enabled: false
        },
        lineWidth: 0,
    }],
    exporting: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            colorByPoint: true
        },
        spline: {
            enableMouseTracking: true,
            animation: {
                duration: 1500
            },
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 5,
                        lineWidth: 1
                    }
                }
            }
        }

    },
    tooltip: {
        yDecimals: 2,
        formatter: function () {
            return tooltipFormat(this.x, null, this.y, yAxisTitle);
        }
    },
    series: [{
        data: [157, 169, 159, 173, 194, 203, 178, 144, 155, 411, 421, 275, 288, 266, 400, 214, 225, 142, 158, 112, 124, 114, 130, 112, 127, 134, 150, 107, 124, 143, 158, 85, 103, 99, 123, 174, 191, 327, 365, 221, 237, 241, 255, 310, 370, 133, 145],
        dataLabels: {
            enabled: true,
            color: '#000',
            style: {
                fontSize: '10px',
                verticalAlign: 'middle'
            }
        }
    }]

});

推荐答案

您可以使用 plotOptions.series.dataLabels 的> allowOverlap 属性可强制显示每个标签:

You can use allowOverlap attribute of plotOptions.series.dataLabels to force the display of each labels :

 plotOptions: {
          series: {
              colorByPoint: true,
              dataLabels: {
                  allowOverlap: true
              }
          },
          /* ... */
}

在此处查看您的正在使用JSFiddle的.

这篇关于条形图上的标签丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！