我创建了一个面积图，它应该适合各种屏幕尺寸。在手机上查看图表时会出现问题。图例与图表重叠。
这是当前的配置：
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 版本不是一种选择，也不是在图表中显示所有数据系列的解决方案。我们需要隐藏一个，因为其中一个具有绘制您看到的虚线的唯一功能。
谢谢您的帮助！