1

出于某种原因，图表的数据标签仅显示在此钻取的底层。dataLabels 设置为“列”。但是，它们不会针对呈现的每一列显示。

我需要更改什么才能让 dataLabels 在钻取的所有级别上显示？

谢谢。

请参阅下面的代码和 jsfiddle：

$('document').ready(function () {
var Drilldown = (function () {
    var chart,
    colors = Highcharts.getOptions().colors;

    function setChart(name, categories, data, color, type) {
        chart.xAxis[0].setCategories(categories);
        for (var i = 0; i < chart.series.length; i++) {
           chart.series[0].remove(true);
        }
        chart.addSeries({
            name: name,
            data: data,
            color: color || 'white'
        });
    }

    function buildDrillDown() {
        var stores = ['92nd Gessner', 'Annco'],
        dayparts = ['Breakfast','Lunch','Afternoon','Dinner','Late Night'],
        categories = ['Gross Sales-06/18/2013','Qty Sold-06/18/2013','Gross Sales-06/19/2013','Qty Sold-06/19/2013'],
        name = 'Gross Sales by Store Name',
        moneyLabel = {
                        enabled: true,
                        color: '#89A54E',
                        style: {
                            fontWeight: 'bold'
                        },
                        formatter: function() {
                            return '$'+ Highcharts.numberFormat(this.y, 0);
                        }
                    },
        data = [{
                y: 9297.73,
                color: colors[2],
                drilldown: {
                    name: 'Gross Sales-06/18/2013',
                    dataLabels: moneyLabel,
                    categories: stores,
                    data: [{
                        y: 4567.05,
                        color: colors[0],
                        drilldown: {
                            name: "Gross Sales by Daypart",
                            categories: dayparts,
                            data: [310.71,1279.32,952.65,1059.91,964.46],
                            color: colors[0]
                        },
                    },
                    {
                        y: 4730.68,
                        color: colors[1],
                        drilldown: {
                            name: "Gross Sales by Daypart",
                            categories: dayparts,
                            data: [186.75,1629.05,881.34,1373.96,659.58],
                            color: colors[1]
                        },
                    }]
                }
            }];

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'drilldown_display',
            type: 'column'
        },
        title: {
            text: 'Drillable Column Chart'
        },
        subtitle: {
            text: 'Click the columns to view Stores. Click again to view Dayparts.'
        },
        xAxis: {
            categories: categories
        },
        yAxis: { // Primary yAxis
          labels: {
              format: '${value}',
              style: {
                  color: '#89A54E'
              }
          },
          title: {
              text: "Gross Sales",
              style: {
                  color: '#89A54E'
              }
          }
        },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    color: '#89A54E',
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        return '$' + this.y
                    }
                },
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            var drilldown = this.drilldown;
                            if (drilldown) { // drill down
                                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                            } else { // restore
                                setChart(name, categories, data);
                            }
                        }
                    }
                }
            },
        },
        tooltip: {
            formatter: function() {
                var point = this.point,
                    s = this.x +':<b>Gross Sales: ' + this.y + '</b><br/>';
                if (point.drilldown) {
                    s += 'Click to view '+ point.category;
                } else {
                    s += 'Click to return to the beginning';
                }
                return s;
            }
        },
        series: [{
            name: name,
            data: data,
            color: 'white',
            pointWidth: 75,
        }],
        exporting: {
            buttons: {
                customButton: {
                    text: 'Flat Chart',
                    onclick: function () {
                      $( "#chart_display" ).show();
                      $( "#drilldown_display").hide();
                      $("#pie_display").hide();
                    }
                }
            }
        }
    });
    }

    return {
        buildDrillDown: buildDrillDown
    };
})();

Drilldown.buildDrillDown();

});

http://jsfiddle.net/K9fQU/

4

1 回答 1

3

其实你的代码有点工作。数据标签行为不一致。enabled: true当我玩弄你的小提琴时，在我注释掉dataLabels并运行后，数据标签肯定会消失。但是，如果我将其添加回来并再次运行，则会显示数据标签，并隐藏在绘图区域内。由于您#89A54E对数据标签使用与第一级列相同的颜色，因此不太明显。

数据标签隐藏在列内的原因是您没有配置处理数据标签溢出的情况。

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

所以你需要做的是，将crop设置为false并将overflow设置为“none”：

plotOptions: {
    column: {
        dataLabels: {
            overflow: 'none',
            crop: false,
            enabled: true,
            color: '#89A54E',
            style: {
                fontWeight: 'bold'
            },
            formatter: function() {
                return '$' + this.y
            }
         },
         // other configuration
}
于 2013-10-04T18:39:15.003 回答