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

我已经创建了一个面积图，对于不同的屏幕尺寸，它应该是一刀切的。在手机上查看图表时会出现问题。图例与图表重叠

以下是当前配置：

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

下面是对当前配置的修改：

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

调整渲染代码的宽度，以查看它在mobile中的外观

有人有好的解决办法吗？传奇会不会长大而不是长大

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

---

谢谢你的帮助

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

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

我已更新原始小提琴，以便在加载时，如果窗口小于640px，可以移动图例。问题是它被切断了，因为图表不够高。如果不具备动态更改保证金的能力，那么确保不会发生这种情况的最佳方法是什么？您需要计算保证金并在图表中设置，保证金不能是动态的。在我的情况下，这并不理想，但必须这样做。谢谢你的回答！不幸的是，这是唯一的办法，希望能有所帮助