以下图表在桌面上的Safari和Chrome中显示正常;但是，它不会在iPad上的任何一个浏览器中显示（iOS 9，iPad Air 2）。只有背景显示。是否有允许图表在移动设备上显示的设置？
http://jsfiddle.net/quint/d7gr6r1g/6/
//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
//-------------------------------------------------------
Highcharts.setOptions({
chart:{
type:'bar',
margin:[5,15,10,100],
backgroundColor: '#383838',
},
credits:{enabled:false},
exporting:{enabled:false},
legend:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineColor:'#ffffff',
lineWidth:1,
labels:{style:{fontWeight:'bold', color: '#ffffff'}},
},
yAxis:{
min:0,
minPadding:0,
maxPadding:0,
tickColor:'#ffffff',
tickWidth:1,
tickLength:3,
gridLineWidth:0,
endOnTick:true,
title:{text: ''},
labels:{
y:10,
style:{
color: '#ffffff',
fontSize:'8px'
},
formatter:function(){
if (this.isLast){
return this.value + ' %';
}
else{
return this.value;
}
}
}
},
tooltip:{
enabled:true,
backgroundColor:'rgba(255, 255, 255, .85)',
borderWidth:0,
shadow:true,
style:{fontSize:'10px',padding:2},
formatter:function() {
return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>";
}
},
plotOptions:{
bar:{
color:'rgba(102,112,86,1)',
shadow:false,
borderWidth:0,
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:8,
lineColor:'rgba(195, 84, 19, 1)'
}
}
}
});
//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
chart:{renderTo:'container1'},
xAxis:{
categories:['ROUND 1'], },
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[80]},
{name:'Target',type: 'scatter',data:[90]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6I0ZEREI5NTt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQzLjMsMy4zbC0xOS45LDIyYy0wLjgsMC45LTIuMiwwLjktMywwTDAuNSwzLjNDLTAuNiwyLjEsMC4zLDAsMiwwbDM5LjgsMEM0My41LDAsNDQuNCwyLjEsNDMuMywzLjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQxLjIsMy4zTDIyLjYsMjMuOWMtMC40LDAuNC0xLjEsMC40LTEuNSwwTDIuNiwzLjNDMiwyLjcsMi41LDEuNywzLjQsMS43aDM3LjFDNDEuMywxLjcsNDEuOCwyLjcsNDEuMiwzLjN6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+DQo="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '10%'}]
}]
});
//-------------------------------------------------------
var chart2 = new Highcharts.Chart({
chart:{renderTo:'container2'},
xAxis:{categories:['ROUND 2']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[92]},
{name:'Target',type: 'scatter',data:[95]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6I0ZEREI5NTt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQzLjMsMy4zbC0xOS45LDIyYy0wLjgsMC45LTIuMiwwLjktMywwTDAuNSwzLjNDLTAuNiwyLjEsMC4zLDAsMiwwbDM5LjgsMEM0My41LDAsNDQuNCwyLjEsNDMuMywzLjN6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTQxLjIsMy4zTDIyLjYsMjMuOWMtMC40LDAuNC0xLjEsMC40LTEuNSwwTDIuNiwzLjNDMiwyLjcsMi41LDEuNywzLjQsMS43aDM3LjFDNDEuMywxLjcsNDEuOCwyLjcsNDEuMiwzLjN6Ig0KCQkvPg0KPC9nPg0KPC9zdmc+DQo="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '5%'}]
}]
});
//-------------------------------------------------------
var chart3 = new Highcharts.Chart({
chart:{renderTo:'container3'},
xAxis:{categories:['ROUND 3']},
yAxis:{
max:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:100,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[75]},
{name:'Target',type: 'scatter',data:[75]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNi41IDI2LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI2LjUgMjYuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2Rpc3BsYXk6bm9uZTt9DQoJLnN0MXtkaXNwbGF5OmlubGluZTtmaWxsOiNGRkZGRkY7fQ0KCS5zdDJ7ZGlzcGxheTppbmxpbmU7ZmlsbDojRkREQjk1O30NCgkuc3Qze2ZpbGw6IzQwNEQyMjtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MS41O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8ZyBjbGFzcz0ic3QwIj4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzUuNiw3TDE1LjcsMjljLTAuOCwwLjktMi4yLDAuOS0zLDBMLTcuMSw3Yy0xLjItMS4zLTAuMi0zLjMsMS41LTMuM2gzOS44QzM1LjksMy42LDM2LjgsNS43LDM1LjYsN3oiLz4NCgk8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMzMuNSw3TDE1LDI3LjVjLTAuNCwwLjQtMS4xLDAuNC0xLjUsMEwtNSw3Yy0wLjYtMC42LTAuMS0xLjcsMC43LTEuN2gzNy4xQzMzLjYsNS4zLDM0LjEsNi40LDMzLjUsN3oiLz4NCjwvZz4NCjxjaXJjbGUgY2xhc3M9InN0MyIgY3g9IjEzLjIiIGN5PSIxMy4yIiByPSIxMi41Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: ''}]
}]
});
//-------------------------------------------------------
var chart4 = new Highcharts.Chart({
chart:{renderTo:'container4'},
xAxis:{categories:['ROUND 4']},
yAxis:{
max:1000,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:1000,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[970]},
{name:'Target',type: 'scatter',data:[850]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzdCNjUzODt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNSwyMi43bDE5LjktMjJjMC44LTAuOSwyLjItMC45LDMsMGwxOS45LDIyYzEuMiwxLjMsMC4yLDMuMy0xLjUsMy4zSDJDMC4zLDI2LTAuNiwyNCwwLjUsMjIuN3oiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yLjYsMjIuN0wyMS4yLDIuMmMwLjQtMC40LDEuMS0wLjQsMS41LDBsMTguNSwyMC41YzAuNiwwLjYsMC4xLDEuNy0wLjcsMS43SDMuNEMyLjUsMjQuMywyLDIzLjMsMi42LDIyLjd6Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '10%'}]
}]
});
//-------------------------------------------------------
var chart5 = new Highcharts.Chart({
chart:{renderTo:'container5'},
xAxis:{categories:['ROUND 5']},
yAxis:{
max:500,tickInterval:100,
labels:{y:10,style:{fontSize:'8px', color: '#ffffff'}},
plotBands:[{from:0,to:500,color: 'rgba(209,219,183,1)'}]
},
series:[{name:'Measure',pointWidth:10,data:[475]},
{name:'Target',type: 'scatter',data:[450]},
{name:'Performance', type:'scatter',
dataLabels: {
style:{
color: '#ffffff',
fontSize:'10px',
},
enabled: true,
useHTML: true,
formatter: function() {
return '<div><img style="float: left; padding-right: 5px; min-width: 24px; max-width: 24px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0My44IDI2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0My44IDI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzdCNjUzODt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTAuNSwyMi43bDE5LjktMjJjMC44LTAuOSwyLjItMC45LDMsMGwxOS45LDIyYzEuMiwxLjMsMC4yLDMuMy0xLjUsMy4zSDJDMC4zLDI2LTAuNiwyNCwwLjUsMjIuN3oiLz4NCjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yLjYsMjIuN0wyMS4yLDIuMmMwLjQtMC40LDEuMS0wLjQsMS41LDBsMTguNSwyMC41YzAuNiwwLjYsMC4xLDEuNy0wLjcsMS43SDMuNEMyLjUsMjQuMywyLDIzLjMsMi42LDIyLjd6Ii8+DQo8L3N2Zz4NCg=="></div></div><div class="performance"style="text-align:center; font-size: 12px;"><div>' + this.point.value + '</div>';
}
},
data:[{x:0, value: '5%'}]
}]
});
//-------------------------------------------------------
$('.performance').parent().parent().css({'top': 0, 'margin-left': 245, 'margin-top': 0});