在两列高图中显示图例项

Display legend items in two columns highcharts

本文关键字：高图中 显示图 两列      更新时间：2023-09-26

在highcharts中，是否可以在两列中显示图例，垂直堆叠?

我正在努力找出最好的方式来显示的传奇项目，目前我们有传奇项目都堆叠在彼此的顶部。

图表上最多有4个系列。

我真的不知道如何处理这个，我看到useHTML的选项，但后来我似乎找不到任何关于如何处理HTML的例子。

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

您是否尝试使用itemWidth参数?

请看

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

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

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

编辑:

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

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

http://api.highcharts.com/hilitock legend.itemStyle 

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/

也许你可以使用图例中的"labelFormater"

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

然后你可以创建一个表格，并按你想要的方式排列图例文本。

查看文档页上的示例

相关文章：