Javascript 如何将边距重置为0并将自定义边距应用于highcharts.js上的x类别栏
我一直在试图改变我的单杠上的边距，但运气不好，有办法吗？如果是这样的话，那么可以设置一个规则，将页边距底部：20px设置为所有元素，然后将页边距底部：40px设置为仅元素2、4、6和8？我创造了一个 这是我的代码：Javascript 如何将边距重置为0并将自定义边距应用于highcharts.js上的x类别栏,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我一直在试图改变我的单杠上的边距，但运气不好，有办法吗？如果是这样的话，那么可以设置一个规则，将页边距底部：20px设置为所有元素，然后将页边距底部：40px设置为仅元素2、4、6和8？我创造了一个 这是我的代码： function smileys() { var chart; $(function () { chart = new Highcharts.Chart({
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();
函数smileys（）{
var图；
$（函数（）{
图表=新的高图表。图表（{
图表：{
renderTo:“smileys”，
类型：'bar'，
背景色：“透明”，
},
标题：{text:null}，
副标题：{text:null}，
xAxis：{
长度：0，
线宽：0，
类别：['Awesome'，'Awesome Previous'，'Good'，'Good Previous'，'ok'，'ok Previous'，'sovery'，'Awfull Previous']，
标题：{
文本：空
},
标签：{
启用：对，
颜色：“#fff”，
x:5，
y:0，
是的，
格式化程序：函数（）{
console.log（this）；
返回{
“太棒了”：“，
“好的”：“，
“好的”：“，
“糟透了”：“，
}[这个值]；
}
}
},
亚克斯：{
最高：100，
分:0,，
网格线宽：0，
标题：{
文本：空
},
标签：{
启用：false，
}
},
工具提示：{
已启用：false
},
打印选项：{
酒吧：{
数据标签：{
启用：对，
颜色：'#f60'
}
}
},
图例：{enabled:false}，
信用证：{已启用：错误}，
打印选项：{
系列：{
//类型：'bar'，
边框宽度：0，
边界半径：3，
点宽：20，
影子：错
}
},
系列：[{
数据：[{
名字：“真棒”，
y:88，
颜色：{
线性梯度：{
x1:0，
y1:0，
x2:1，
y2:0
},
停止：[
[0，‘rgb（66、121、54）’，
[.50，'rgb（86146,71）'，
[.50，'rgb（9715979）'，
[1，‘rgb（120182，98）’]]
}, {
名称：'Aweasome Previous'，
y:85，
颜色：{
线性梯度：{
x1:0，
y1:0，
x2:1，
y2:0
},
停止：[
[0，'rgb（62131161）'，
[.50，'rgb（45,94,119）'，
[.50，'rgb（51107134）'，
[1，‘rgb（34,72,91）’]]
}, {
名字：'好'，
y:75，
颜色：{
线性梯度：{
x1:0，
y1:0，
x2:1，
y2:0
},
停止：[
[0，'rgb（167195100）'，
[50，'rgb（183206128）'，
[50，'rgb（192213145）'，
[1，‘rgb（207223170）’]]
}, {
姓名：“好前辈”，
y:50，
颜色：{
线性梯度：{
x1:0，
y1:0，
x2:1，
y2:0
},
停止：[
[0，'rgb（62131161）'，
[.50，'rgb（45,94,119）'，
[.50，'rgb（51107134）'，
[1，‘rgb（34,72,91）’]]
}, {
姓名：'好'，
y:95，
颜色：{
线性梯度：{
x1:0，
y1:0，
x2:1，
y2:0
},
停止：[
[0，'rgb（211，127，39）'，
[.50，'rgb（220151,52）'，
[.50，'rgb（224、163、57）
var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'transparent',
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
tickLength: 0,
lineWidth: 0,
categories: ['Awesome', 'MARGIN-BOTTOM:40 PREVIOUS', 'Good', 'MARGIN-BOTTOM:40 PREVIOUS', 'Okay', 'MARGIN-BOTTOM:40 PREVIOUS', 'Awful', 'MARGIN-BOTTOM:40 PREVIOUS'],
title: {
text: null
},
labels: {
enabled: true,
color: '#fff',
}
},
yAxis: {
max: 100,
min: 0,
gridLineWidth: 0,
title: {
text: null
},
labels: {
enabled: false,
}
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
color: '#f60'
},
borderWidth: 0,
borderRadius: 3
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
type: 'bar',
shadow: false,
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: '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: '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: '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)']]
}
}]},
{
type: 'bar',
data: [{
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 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 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 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