响应Highchart传奇的位置

Question

有没有办法让Highcharts Pie图表在屏幕尺寸较小时降低图例.请参阅附图以供参考.

这是屏幕很大时的示例图像.

这将是在小屏幕或小型设备中的样子

这有可能实现吗？谢谢你的帮助.

Answer 1

您可以在创建图表之前检查窗口宽度,并使用该信息设置图例的对齐方式.例如(JSFiddle):

var isBig = $(window).width() > 700;

var legendBig = {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
};

var legendSmall = {
    align: 'center',
    verticalAlign: 'bottom',
    layout: 'horizontal'
}

$('#container').highcharts({
    legend: isBig? legendBig : legendSmall,
    // ...
});

Answer 2

这是一个旧帖子，但由于我遇到了它，很可能其他人会在某个时候。我发现从 Highcharts 5 开始，您可以配置响应行为的选项：https : //www.highcharts.com/docs/chart-concepts/responsive，所以这就是现在要走的路。

这是我用来实现此效果的配置：

{
  chart: {
    type: 'pie',
  },
  legend: {
    layout: 'vertical',
    squareSymbol: false,
    symbolRadius: 0,
  },
  plotOptions: {
    pie:
      showInLegend: true,
    },
  },
  responsive: {
    rules: [{
      condition: {
        minWidth: 700,
      },
      chartOptions: {
        legend: {
          align: 'right',
          verticalAlign: 'top',
        }
      }
    }]
  },
}