我在使用Highcharts时遇到了一些问题。
我需要根据列“ B”的值绘制第三列“ C”的高度
(默认情况下,“ C”列的高度绘制基于“ A”列)
我创建了一个简单的示例here
$('#container').each(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'A',
'B',
'C'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.val}</b> ',
shared: true
},
legend: {
enabled: true
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '%';
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:100, val: 2111, color: '#199ED8' },
{ y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
{ y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});
最佳答案
在这种情况下,我正在与Julio合作,我们已解决了这个问题。
分辨率:http://jsfiddle.net/JVNjs/1203/
$('#container').each(function () {
var publico = 2111;
var abordados = 748;
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'Público',
'Abordados',
'Conversão'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.y}</b> ',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if(this.x == 'Conversão'){
return Math.round(this.y / abordados * 100, 0) + '%';
}else{
return Math.round(this.y / publico * 100, 0) + '%';
}
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:publico, color: '#199ED8' },
{ y:abordados, color: '#6CF' },
{ y:433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});
关于javascript - HIGHCHARTS-基于先前列值的列值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39727721/