HighChart Legends 克服图表

Posted 2023-02-16

【中文标题】HighChart Legends 克服图表

【英文标题】：HighChart Legends Overcome on charts

【发布时间】：2019-09-28 00:54:42

【问题描述】：

如果图表中有更多的图例值。然后默认它在图表上克服，如下图所示。我们可以用滚动条而不是分页来处理这个问题吗？

【问题讨论】：

嗨@K.Satya，请在一些在线代码编辑器中重现您的问题。在以下示例中，一切正常：jsfiddle.net/BlackLabel/3c5k2g7m

感谢@ppotaczek 的快速回复。它工作正常。但是在分页滚动条的地方可以吗？

【参考方案1】：

不支持Highcharts图例中的滚动条，但您可以创建自定义图例：

var chart = new Highcharts.Chart(

  chart: 
    renderTo: 'container',
    marginRight: 150 // make room for the legend
  ,

  xAxis: 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  ,

  legend: 
    enabled: false
  ,

  series: (function() 
    var series = [];
    for (var i = 0; i < 20; i++) 
      var data = [];
      for (var j = 0; j < 12; j++) 
        data.push(Math.random());
      
      series.push(
        name: 'Location ' + (i + 1),
        data: data
      );
    
    return series;
  )()
, function(chart) 
  var options = chart.options.legend;
  /**
   * What happens when the user clicks the legend item
   */
  function clickItem(series, $legendItem, $line) 
    series.setVisible();
    $legendItem.css(
      options[series.visible ? 'itemStyle' : 'itemHiddenStyle']
    );
    $line.css(
      borderTop: '2px solid ' + (series.visible ? series.color :
        options.itemHiddenStyle.color)
    );
  
  // Create the legend box
  var $legend = $('<div>')
    .css(
      width: 110,
      maxHeight: 210,
      padding: 10,
      position: 'absolute',
      overflow: 'auto',
      right: 10,
      top: 40,
      borderColor: options.borderColor,
      borderWidth: options.borderWidth,
      borderStyle: 'solid',
      borderRadius: options.borderRadius
    )
    .appendTo(chart.container);


  $.each(chart.series, function(i, series) 
    // crete the legend item            
    var $legendItem = $('<div>')
      .css(
        position: 'relative',
        marginLeft: 20
      )
      .css(options[series.visible ? 'itemStyle' : 'itemHiddenStyle'])
      .html(series.name)
      .appendTo($legend);

    // create the line with each series color
    var $line = $('<div>')
      .css(
        width: 16,
        position: 'absolute',
        left: -20,
        top: 8,
        borderTop: '2px solid ' + (series.visible ? series.color :
          options.itemHiddenStyle.color)
      )
      .appendTo($legendItem);

    // click handler 
    $legendItem.click(function() 
      clickItem(series, $legendItem, $line);
    );

  );
);

现场演示： http://jsfiddle.net/BlackLabel/phvz9uqe/

用户语音线程： https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/1256991-scrolling-legends