Question

gridLineDashStyle（仅当一项作为波纹管演示时，Highchart的底部缺少网格线。

<!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>

我得到的错误是gridLineDashStyle，只有一个项目时，Highchart的底部缺少网格线。

我的期望如下：

有人帮我吗？

谢谢！

Answer 1

还必须在第一个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/

仅当一项作为波纹管演示时，Highchart的gridLineDashStyle底部缺少网格线

1 个答案: