它与highcharts有关，最初图表正确呈现 http://jsfiddle.net/syQRG/19/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
width: 748,
height: 552,
events: {
load: function (event) {
var chart = this;
chart.renderer.image('http://i43.tinypic.com/3133ktj.png', 20, 50, 333, 409)
.add();
chart.renderer.image('http://i43.tinypic.com/70zy2t.png', 120, 50, 98, 65)
.add();
chart.renderer.text('Brands Winning', 80, 90).attr({
'stroke-width': 1,
stroke: 'black'
}).css({
fontSize: '19pt',
fontFamily: 'Rockwell'
})
.add();
chart.renderer.image('http://i43.tinypic.com/3133ktj.png', 394, 50, 333, 409)
.add();
chart.renderer.text(' Bars show difference in likely volume share from usage & behaviour compared to brand associations', 20, 475).attr({
}).css({
fontSize: '10pt',
fontFamily: '"Ariel Regular"'
})
.add();
chart.renderer.image('http://i41.tinypic.com/t8t7jc.png', 510, 50, 98, 65)
.add();
chart.renderer.text('Brands Losing', 475, 90).attr({
'stroke-width': 1,
stroke: 'black'
}).css({
fontSize: '19pt',
fontFamily: 'Rockwell'
})
.add();
}
}
},
title: {
text: 'Net volume outcome',
align: 'left'
},
subtitle: {
text: '(% Converted)-(% Diverted)',
align: 'left'
},
xAxis: [{
lineWidth: 0,
tickWidth: 0,
}, {
categories: ['McDonald\'s', 'Taco Bell', 'Sonic', 'Dunkin\' Donuts', 'Boston Market', 'Subway', 'Hardees', 'Little Caesar\'s', 'Popeyes', 'Panera', 'Papa John\'s', 'Arby\'s', 'John Silvers', 'Chipotle'],
width: 200,
height: 335,
lineWidth: 1.5,
lineColor: 'black',
tickWidth: 0,
labels: {
formatter: function () {
if ('Sonic' === this.value) {
return '<span style="fill: #B1D235;font-weight:bold;">' + this.value + '</span>';
} else {
return this.value;
}
}
},
top: 125,
left: 160,
offset: 0,
}, {
reversed: true,
categories: ['McDonald\'s', 'Taco Bell', 'Sonic', 'Dunkin\' Donuts', 'Boston Market', 'Subway', 'Hardees', 'Little Caesar\'s', 'Popeyes', 'Panera', 'Papa John\'s', 'Arby\'s', 'John Silvers', 'Chipotle'],
width: 200,
height: 335,
lineWidth: 1.5,
lineColor: 'black',
tickWidth: 0,
labels: {
x: 10,
y: 5,
align: 'left',
formatter: function () {
if ('Little Caesar\'s' === this.value) {
return '<span style="fill: #F2753F;font-weight:bold;">' + this.value + '</span>';
} else {
return this.value;
}
}
},
top: 125,
left: 550,
offset: 0,
}],
yAxis: [{
title: {
enabled: false
}
}, {
min: 0,
max: 100,
lineWidth: 0,
gridLineWidth: 0,
title: {
text: null
// align: 'high'
},
top: 125,
left: 160,
width: 150,
height: 335,
labels: {
enabled: false
}
}, {
reversed: true,
min: 0,
max: 100,
lineWidth: 0,
gridLineWidth: 0,
title: {
text: null
// align: 'high'
},
top: 125,
left:400,
width: 150,
height: 335,
labels: {
enabled: false
}
}],
tooltip: {
enabled: false
},
plotOptions: {
bar: {
pointWidth: 15,
color: '#B0B0AF'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [{
xAxis: 1,
yAxis: 1,
data: [100, 95, {
y: 90,
color: '#B1D235',
labels: {
style: {
color: 'red'
}
}
},
85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 35],
dataLabels: {
enabled: true,
align: 'left',
color: 'black',
style: {
fontWeight: 'bold',
fontSize: '14pt',
fontFamily: 'Rockwell'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 1, '.') + '%';
},
x: -490,
y: -142,
}
}, {
xAxis: 2,
yAxis: 2,
data: [35, 40, 45, 50, 55.36, 50, 60, {
y: 65,
color: '#F2753F',
labels: {
style: {
color: 'red'
}
}
},
70, 75, 80, 10, 90, 95],
dataLabels: {
enabled: true,
align: 'right',
color: 'black',
style: {
fontWeight: 'bold',
fontSize: '14pt',
fontFamily: 'Rockwell'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 1, '.') + '%';
},
x: -700,
y: -142,
}
}]
});
});
但是当你改变浏览器的大小或下载时。第二个品牌即品牌输掉就是变化。
请建议上面的答案