Отображение элементов легенды в двух столбцах highcharts

в highcharts можно ли отобразить легенду в двух столбцах, уложенных вертикально?

Я пытаюсь разработать лучший способ отображения элементов легенды, на данный момент у нас есть элементы легенды, сложенные друг на друга.

на графике будет максимум 4 серии.

Я не совсем уверен, как подойти к этому, я вижу вариант useHTML, но тогда я не могу найти никаких примеров того, что делать с ФОРМАТ HTML.

http://jsbin.com/oyicuc/9/edit

любой совет был бы очень полезен, спасибо.

6
css highcharts highstock html javascript

3 ответов

вы пытались использовать параметр itemWidth?

пожалуйста, посмотрите на

http://jsfiddle.net/B9L2b/1266/

 legend: {
    width: 200,
    itemWidth: 100
},

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

EDIT:

http://jsbin.com/oyicuc/31/

width:600,
        itemWidth:300,
        itemStyle: {
          width:280
        }

http://api.highcharts.com/highstock#legend.itemStyle

14

возможно, вы могли бы использовать "labelFormater" легенды.

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

затем вы можете создать таблицу и упорядочить текст легенды, как вы wnat.

посмотрите пример на странице документации.

0
function renderElements() {
      if (this.legend) {
       this.legend.destroy();
      }
      //distance between 2 elements
      let itemDistance = this.legend.options.itemDistance;
      //the biggest element
      let maxItemWidth = this.legend.maxItemWidth;
      //make the width of the legend in the size of 2 largest elements + 
      //distance  
      let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
      //container width
      let boxWidth = this.plotBox.width;
      //if the length of the 2 largest elements + the distance between them 
      //is less than the width of           container, we make 1 row, else 
      //set legend width 2 max elements + distance between
    if (boxWidth < nextLegendWidth) {
     this.legend.options.width = maxItemWidth;
    } else {
     this.legend.options.width = nextLegendWidth;
  }

  this.render()   
}

chart: {
    events: {
      load: renderElements,
      redraw: renderElements
  }
}

https://jsfiddle.net/jecrovb7/38/

0