Highcharts Legend：小屏幕上的重叠图表

Question

我创建了一个面积图，它应该适合各种屏幕尺寸。在手机上查看图表时会出现问题。图例与图表重叠。

这是当前配置：

    chart: {
        backgroundColor: '#EFEFEF',
        margin: [50,10,60,50]         
    },        
    credits: {
        enabled: false
    },
    title: {
        text: 'Engagement Index Score',
        style: {
            color: '#555555',
            fontWeight: 'normal',
            fontSize: 13
        }
    },
    legend: {
        borderWidth: 0,
        symbolPadding: 10,
        itemMarginBottom: 10,
        itemDistance: 20,
        itemStyle: {
            color: '#555555',
            cursor: 'default'
        },
        itemHoverStyle: {
            color: '#555555'
        }
    },        
    yAxis: {
        min: 0,
        title: {
            text: '% of U.S. Workers',
            style: {
                color: '#555555',
                fontWeight: 'normal',
                fontSize: 13
            },
            margin: 15                           
        }
    },        
    xAxis: {
        min: 5,
        max: 100          
    },
    plotOptions: {
        area: {
            connectNulls: true
        },
        scatter: {
            color: '#565656',
            dashStyle: 'dash',
            lineWidth: 2,
            zIndex: 100,
            events: {
                legendItemClick: function () {
                    return false; 
                }
            },
            enableMouseTracking: false,
            events: {
                legendItemClick: function () {
                    return false; 
                }
            }
        }                     
    },      
    series: [{
        type: 'scatter',
        name: ['You!'],
        data: [[80,21]],
        marker: {
            symbol: 'url(img/star.png)'
        }
    }, {
        type: 'scatter',
        name: null,
        data: [[80,0], [80,20]],
        marker: {
            enabled: false
        },
        showInLegend: false
    }, {
        type: 'area',
        name: ['Disengaged'],
        data: [[5,0],[10,4],[15,4],[20,3],[25, 3],[30, 7],[35, 7],[40, 9], [45, 9], [49.5, 14]],
        color: '#EA2428',
        marker: {
            enabled: false
        }
    }, {
        type: 'area',
        name: ['Under Engaged'],
        data: [[49.5, 14], [55,14], [60, 14], [65, 13], [70, 13], [74.5, 18]],
        color: '#F79420',
        marker: {
            enabled: false
        }            
    }, {
        type: 'area',
        name: ['Moderately Engaged'],
        data: [[74.5, 18], [80, 18], [85, 8], [90, 8], [95, 8], [99.5, 20]],
        color: '#18AFE6',
        marker: {
            enabled: false
        }            
    }, {
        type: 'area',
        name: ['Fully Engaged'],
        data: [[99.5, 20], [100, 20]],
        color: '#5C2E8F',
        marker: {
            enabled: false
        }            
    }]

这是当前配置的一个小技巧：

http://jsfiddle.net/gabezeck/8Beea/

调整渲染代码的宽度以查看它在移动设备中的外观。

谁有好的解决方案？传奇可以向下而不是向上吗？

创建图例的静态 HTML 版本不是一种选择，也不是在图表中显示所有数据系列的解决方案。我们需要隐藏一个，因为其中一个具有绘制您看到的虚线的唯一功能。

感谢您的帮助！

Answer 1

删除边距，它会采用动态边距，并自行调整图例的位置，检查这个更新的小提琴

Answer 2

我想到的只是捕捉调整大小事件或检查宽度，然后定位图例。