Highcharts обычай легенда символ

Question

мне нужно на заказ символ легенды моей диаграммы

Я использую Highcharts.js. Я стараюсь несколько решений без успеха:

• Легенда: Прямоугольник или диапазон генерируются в HTML, как tspan, который не поддерживает цвет фона

  legend: { 
      enabled: true, 
      align: 'left', 
      verticalAlign: 'middle', 
      layout: 'vertical', 
      useHtml: true, 
      symbolHeight: 0, 
      symbolWidth: 0, 
      labelFormatter: function() { 
        if (this.name == 'Epargne') return '<div><rect style="width:100px;display:inline-block;padding:10px 4px 10px 4px;text-align:center;color:#FFF;fill:'+ this.color +'">47.000€</rect><b>EPARGNE</b></div>'; 
        if (this.name == 'Profil prudent') return 'PRUDENT'; 
        if (this.name == 'Profil équilibré') return 'EQUILIBRE'; 
        if (this.name == 'Profil entreprenant') return 'ENTREPRENANT'; 
        return '??' 
       } 
  }, 
  

• серии: символ не может быть текст и предопределенный не работает. Я не хочу символов на линиях, поэтому я отключу маркер в plotOptions.

  series: [ 
      { 
         data: [], 
         id: 'epargne', 
       name: 'Epargne', 
         marker: { 
         symbol: 'triangle' 
         } 
        }, 
       { 
      linkedTo: 'epargne', 
        name: 'Epargne', 
         data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
         color: '#2f7ed7' 
       }, 
  

• с помощью визуализации: не применять

  Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) { 
      return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z']; 
  }; 
  if (Highcharts.VMLRenderer) { 
      Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross; 
  } 
  

здесь скрипку: jsfiddle

возможно ли это? Как я могу это достичь?

Заранее спасибо.

Answer 1

Вы можете добиться желаемого результата при использовании html. В форматировании меток создайте контейнер div для текста и поля. Установите цвет фона в цвет точек. Пробел между элементами легенды можно установить с помощью legend.itemMarginBottom/Top.

legend: { 
    enabled: true, 
    align: 'left', 
    verticalAlign: 'top', 
    layout: 'vertical', 
    useHTML: true, 
    symbolHeight: 0, 
    symbolWidth: 0, 
    itemMarginTop: 4, 
    itemMarginBottom: 4, 
    labelFormatter: function() { 
    return '<div><div style="width:70px;display:inline-block;padding:3px 2px 3px 2px;text-align:center;color:#FFF;background-color:' + this.color + '">47.000€</div> <b>' + this.name + '</b></div>'; 
    } 
}, 

пример: https://jsfiddle.net/5n7fue7m/