4

我想在项目名称之前带上复选框，通常在项目名称之后。有关更多说明，请参阅下图。

在此处输入图像描述

4

2 回答 2

7

默认情况下不支持，但您可以使用简单的解决方法，请参阅：http: //jsfiddle.net/Le4Vc/4/

$('#container').highcharts({

    chart: {
        events: {
            load: function() {
                var chart = this;

                $.each(chart.legend.allItems, function(i, item){
                    var $check = $(item.checkbox),
                        left = parseFloat($check.css('left')),
                        label = item.legendItem,
                        static = 30;

                    $check.css({
                        left: (left - label.bBox.width - static) + 'px'  
                    });
                });

            }
        }
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            },
            allowPointSelect: true,
            showCheckbox: true
        }
    },
    legend: {
        symbolPadding: 20,
        symbolWidth: 0
    },
    series: [{
        name: 's 1',
        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]
    },{
        name: 'another name',
        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].sort(function(a,b) { return a - b; })
    }]

});

编辑： 另一种解决方案，更通用的是包装positionCheckboxes功能。例如：

(function (H) {
    H.wrap(H.Legend.prototype, 'positionCheckboxes', function (p, scrollOffset) {
        var alignAttr = this.group.alignAttr,
            translateY,
            clipHeight = this.clipHeight || this.legendHeight;

        if (alignAttr) {
            translateY = alignAttr.translateY;
            H.each(this.allItems, function (item) {
                var checkbox = item.checkbox,
                    bBox = item.legendItem.bBox,
                    top;

                if (checkbox) {
                    top = (translateY + checkbox.y + (scrollOffset || 0) + 3);
                    H.css(checkbox, {
                        left: (alignAttr.translateX + item.checkboxOffset + checkbox.x - 60 - bBox.width) + 'px',
                        top: top + 'px',
                        display: top > translateY - 6 && top < translateY + clipHeight - 6 ? '' : 'none'
                    });
                }
            });
        }
    });
})(Highcharts);

和演示：http: //jsfiddle.net/Le4Vc/85/

于 2013-10-04T11:31:08.890 回答
1

不看图表代码很难判断，但您可能会对 rtl 图例选项感到高兴。

图例：{ rtl: true }，

或者

图例：{ rtl: false }，

http://api.highcharts.com/highcharts#legend.rtl

于 2013-10-04T08:11:32.413 回答