水平バーの余白を変更しようとしましたが、うまくいきませんでした。それを行う方法はありますか? もしそうなら、margin-bottom: 20px をすべてに設定し、次に margin-bottom: 40px を要素 2、4、6、および 8 のみに設定することは可能ですか? http://jsfiddle.net/creativestudio/KrTbz/6/を作成しました
これは私のコードです:
function smileys() {
var chart;
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'smileys',
type: 'bar',
backgroundColor: 'transparent',
},
title: { text: null },
subtitle: { text: null },
xAxis: {
tickLength: 0,
lineWidth: 0,
categories: ['Awesome','Awesome Previous', 'Good', 'Good Previous', 'Okay', 'Okay Previous', 'Awful', 'Awfull Previous'],
title: {
text: null
},
labels: {
enabled: true,
color: '#fff',
x: 5,
y: 0,
useHTML: true,
formatter: function () {
console.log(this);
return {
'Awesome': '<i class="smile-awesome" style="font-size:.75em" type="icon"></i>',
'Good': '<i class="smile-good" style="font-size:.75em" type="icon"></i>',
'Okay': '<i class="smile-okay" style="font-size:.75em" type="icon"></i>',
'Awful': '<i class="smile-yuck" style="font-size:.75em" type="icon"></i>',
}[this.value];
}
}
},
yAxis: {
max: 100,
min: 0,
gridLineWidth: 0,
title: {
text: null
},
labels: {
enabled: false,
}
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#f60'
}
}
},
legend: { enabled: false },
credits: { enabled: false },
plotOptions: {
series: {
// type: 'bar',
borderWidth: 0,
borderRadius: 3,
pointWidth: 20,
shadow: false
}
},
series: [{
data: [{
name: 'Awesome',
y: 88,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(66, 121, 54)'],
[.50, 'rgb(86, 146, 71)'],
[.50, 'rgb(97, 159, 79)'],
[1, 'rgb(120, 182, 98)']]}
}, {
name: 'Awesome Previous',
y: 85,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(62, 131, 161)'],
[.50, 'rgb(45, 94, 119)'],
[.50, 'rgb(51, 107, 134)'],
[1, 'rgb(34, 72, 91)']]}
}, {
name: 'Good',
y: 75,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(167, 195, 100)'],
[.50, 'rgb(183, 206, 128)'],
[.50, 'rgb(192, 213, 145)'],
[1, 'rgb(207, 223, 170)']]}
}, {
name: 'Good Previous',
y: 50,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(62, 131, 161)'],
[.50, 'rgb(45, 94, 119)'],
[.50, 'rgb(51, 107, 134)'],
[1, 'rgb(34, 72, 91)']]}
}, {
name: 'Okay',
y: 95,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(211, 127, 39)'],
[.50, 'rgb(220, 151, 52)'],
[.50, 'rgb(224, 163, 57)'],
[1, 'rgb(232, 186, 72)']]}
}, {
name: 'Okay Previous',
y: 85,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(62, 131, 161)'],
[.50, 'rgb(45, 94, 119)'],
[.50, 'rgb(51, 107, 134)'],
[1, 'rgb(34, 72, 91)']]}
}, {
name: 'Awful',
y: 68,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(190, 63, 36)'],
[.50, 'rgb(203, 83, 48)'],
[.50, 'rgb(208, 94, 53)'],
[1, 'rgb(220, 116, 66)']]}
}, {
name: 'Awful Previous',
y: 88,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, 'rgb(62, 131, 161)'],
[.50, 'rgb(45, 94, 119)'],
[.50, 'rgb(51, 107, 134)'],
[1, 'rgb(34, 72, 91)']]}
}]
}] //series ends
}); //Highcharts.Chart ends
}); //function ends
}
smileys();