Question

如果图表中有更多图例值。然后通过dfault克服了下图所示的图表。我们可以用滚动条而不用分页来处理吗？

Answer 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

HighChart Legends在图表上克服

1 个答案: