在Highchart图例中，要在开始时带复选框

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

Answer 1

默认情况下，它不受支持，但您可以使用简单的解决方法，请参阅： 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; }) }] }); 

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

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

Answer 2

没有看到你的图表代码很难说，但你可能会对rtl图例选项感到高兴。

传说：{rtl：true}，

要么

传说：{rtl：false}，

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