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',
        }
      }
    }]
  },
}

Answer 3

由于您要求的是响应式布局，我已经做了一个小小的小提琴，它会监听resize事件并相应地更改图例属性。

不确定它是否能很好地工作（图例可能需要在每个位置进行一些调整），但精神如下：

$(function () {

    $(document).ready(function () {
        $(window).resize(function () {                      
            var chart =  $('#container').highcharts();
            var isBig = chart.chartWidth > 450;
            console.log(chart.chartWidth);
            if (isBig) {
              chart.legend.options.align = "right";
              chart.legend.options.verticalAlign = "middle";
              chart.legend.options.layout = "vertical";
              chart.isDirtyLegend = true;
            } else {
              chart.legend.options.align = "center";
              chart.legend.options.verticalAlign = "bottom";
              chart.legend.options.layout = "horizontal";
              chart.isDirtyLegend = true;                   
            }
        });



        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'                
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            legend: {

            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Microsoft Internet Explorer',
                    y: 56.33
                }, {
                    name: 'Chrome',
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Firefox',
                    y: 10.38
                }, {
                    name: 'Safari',
                    y: 4.77
                }, {
                    name: 'Opera',
                    y: 0.91
                }, {
                    name: 'Proprietary or Undetectable',
                    y: 0.2
                }]
            }]
        });
          $(window).trigger("resize");
    });
});

在每次调整大小时，都会检查图表宽度，如果它低于阈值，则图例会更改位置属性。

重新绘制图表时（当容器变小时），图表会正确绘制。

示例小提琴：https://jsfiddle.net/9xfL6rz1/2/

Answer 4

您可以使用CSS媒体查询。您可以定义屏幕的最小宽度和最大宽度。

例如，如果您需要在屏幕小于320px时向元素添加样式，则可以使用此类属性：

@media only screen and (max-width : 320px) {
  /* Styles */
}

这是一个小提琴，我创建了一个小演示：https://jsfiddle.net/valentinho14/mkr2bgww/

响应Highchart传奇的位置

4 个答案: