gpt4 book ai didi

javascript - 当只有一项时,Highchart 的 gridLineDashStyle 底部缺少网格线,如下所示

转载 作者:行者123 更新时间:2023-12-03 00:35:59 24 4
gpt4 key购买 nike

gridLineDashStyle 当只有一项时,Highchart 底部缺少网格线,如下所示。

https://jsfiddle.net/nra6d3fj/1/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.4/highcharts.js"></script>
</head>
<body>
<div id="container2" style="min-width: 310px; max-width: 800px; height: auto; margin: 0 auto;"></div>
<script>
var categories = ['title 1'];
var maxYAxis = 2;
var heighLabelYAxis = 50;
Highcharts.chart('container2', {
colors: ['#37c3e1', '#e13767'],
chart: {
type: 'bar',
backgroundColor: null,
height: 76
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: {
enabled: false
},
title: {
text: false
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="'+this.value+'">' + name + '</span>';
},
useHTML: true,
},
gridLineDashStyle: 'dotted',
}, { // mirror axis on right side
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="'+this.value+'">' + name + '</span>';
},
useHTML: true,
}
}],
yAxis: {
title: {
text: null
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
tickInterval: 20,
min:-maxYAxis,
max: maxYAxis,
labels: {
formatter: function () {
return Math.abs(this.value) + '名';
},

},
},
legend: {
enabled: false,
},

plotOptions: {
series: {
stacking: 'normal',
pointWidth: categories.length < 13 ? 25 : (400 - heighLabelYAxis)/categories.length,
},
},
tooltip: {
//这里是浮动框
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.point.category +
': ' + Math.abs(this.point.y);
}
},
series: [{
name: '男性',
data: [-5],
}, {
name: '女性',
data: [2],
},]
});
</script>
</body>
</html>

当只有一项时,我收到的错误是 Highchart 的 gridLineDashStyle 底部缺少网格线。

我的期望是这样的:

enter image description here

有人帮帮我吗?

谢谢!

最佳答案

您还必须在第一个 xAxis 中设置gridLineWidth。查看下面发布的演示。

  xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="' + this.value + '">' + name + '</span>';
},
useHTML: true,
},
gridLineDashStyle: 'dash',
gridLineWidth: 1
}, { // mirror axis on right side
gridLineDashStyle: 'dot',
gridLineWidth: 1,
gridLineColor: "#000000",
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1,
formatter: function() {
var name = this.value.length > 10 ? this.value.substring(0, 10) + "..." : this.value;
return '<span title="' + this.value + '">' + name + '</span>';
},
useHTML: true,
}
}]

演示: https://jsfiddle.net/BlackLabel/th0ymn69/

关于javascript - 当只有一项时,Highchart 的 gridLineDashStyle 底部缺少网格线,如下所示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53662652/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com