Javascript 样式图表x和y轴
我被一个问题困住了,找不到进一步的办法。我正在尝试使用highcharts制作图表。但无法在左侧显示右侧的百分比值,并将底部和左侧的行稍微上移一点,使它们看起来像第一个屏幕。底部标签下面的勾号也有同样的问题,它们似乎无法移动到顶部,因此它们将覆盖中间的底线 必须是这样的: 这就是我到目前为止所做的: 下面是我的代码的外观: 和highcharts设置:Javascript 样式图表x和y轴,javascript,jquery,css,highcharts,Javascript,Jquery,Css,Highcharts,我被一个问题困住了,找不到进一步的办法。我正在尝试使用highcharts制作图表。但无法在左侧显示右侧的百分比值,并将底部和左侧的行稍微上移一点,使它们看起来像第一个屏幕。底部标签下面的勾号也有同样的问题,它们似乎无法移动到顶部,因此它们将覆盖中间的底线 必须是这样的: 这就是我到目前为止所做的: 下面是我的代码的外观: 和highcharts设置: $j('.investor-calculator .chart-container .chart').highcharts({ ti
$j('.investor-calculator .chart-container .chart').highcharts({
title: {
text: '',
x: -20 /*center*/
},
background: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Янв', 'Мар', 'Май', 'Июл', 'Сен', 'Ноя'],
tickmarkPlacement: 'on',
tickColor: '#d2d2d2',
gridLineColor: '#eee',
tick: false
},
yAxis: {
title: null,
tickPosition: 'inside',
gridLineDashStyle: 'longdash',
lineColor: '#d2d2d2',
lineWidth: 1
},
tooltip: {
valueSuffix: null
},
series: [{
name: 'Some Name',
data: [1.0, 6.9, 2.5, 8.5, 1.0, 12.5]
}],
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ['#e0502f'],
plotOptions: {
series: {
lineWidth: 4,
marker: {
enabled: false
}
}
}
});
对于Y轴标签:
对于勾号位置,限制为“内”或“外”,它们不能跨x轴
至于轴交叉,Steve p对此有答案要移动x轴标签,请在x轴上添加类似的内容:
labels:{
y:25
}
对于y轴,可以强制勾选间隔为每5%,并按如下方式设置标签格式:
tickInterval: 5,
labels: {
format: '{value} %'
}
还有一些调整:
您可以使用偏移移动轴位置,例如:
yAxis: {
min:-4,
startOnTick:false,
offset:-20
min和startOnTick强制y轴从-4开始,但不会打印标签,因为min不是5的倍数
代码整理()轴交叉可以使用“偏移”(请参阅我的更新)。喊得好,我没意识到
yAxis: {
min:-4,
startOnTick:false,
offset:-20