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

标签 javascript highcharts

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/

相关文章:

javascript - 使用 colorValue 的 Highcharts 饼图切片颜色强度

highcharts - Highcharts 的 afterSetExtremes 回调

javascript - $(...).highcharts 不是函数

javascript - 如何使用 Javascript 表单发送到特定电子邮件?

javascript - 如何创建一个上下文菜单,仅在单击容器时显示在光标位置?

javascript - AngularJS 中的异步数据检索

javascript - Highcharts 错误 #16 : charts not showing on the same page

javascript - Regex Javascript - 删除两个 html 注释之间的文本

javascript - 将值从组件 data() 传递到其他文件

css - Highcharts 在带有 z 索引的图上显示网格