Question

我正在使用带有jquery的高图。我能够显示带有标签的X轴（Apple，梨）..但我想要显示没有标签的Y轴。换句话说，我想在Y上显示一条直线-轴。这是我的代码

$(function () {

    // Configure the chart
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Highcharts axis visibility'
        },

        xAxis: {
            categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Fruit'
            },
            visible: false
        },

        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            data: [1, 3, 2, 4],
            name: 'Ola'
        }, {
            data: [5, 4, 5, 2],
            name: 'Kari'
        }]

    });

    var yVis = false,
        xVis = true;

});

Answer 1

这可以而且应该通过选项来解决：

yAxis.lineWidth - 启用该行
yAxis.title.text - 隐藏标题
yAxis.gridLineWidth - 禁用水平线，
yAxis.labels.enabled - 禁用标签

工作演示：http://jsfiddle.net/BlackLabel/3sembmfo/122/

段：

    yAxis: {
        allowDecimals: false,
        title: {
            text: null
        },
        labels: {
            enabled: false
        },
        gridLineWidth: 0,
        lineWidth: 1,
        visible: true
    },

Answer 2

用此替换y轴代码。 http://jsfiddle.net/3sembmfo/119/。如果您有任何疑问，请告诉我。

 yAxis: {
        allowDecimals: false,
        labels:{
            style: {
                fontSize:'0px'
            }
        },
        title: {
            text: 'Fruit',
                style: {
                fontSize:'0px'
            }
        },
        visible: true
    },

Answer 3

您必须使用Highcharts.SVGRenderer并使用加载事件添加行。

chart: {
  type: 'column',
  events: {
    load: function() {
      var ren = this.renderer;
      ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
        .attr({
          'stroke-width': 1,
          stroke: '#000'
        })
        .add();
    }
  }
},

Fiddle演示

$(function() {

  // Configure the chart
  $('#container').highcharts({

    chart: {
      type: 'column',
      events: {
        load: function() {
          var ren = this.renderer;
          ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
            .attr({
              'stroke-width': 1,
              stroke: '#000'
            })
            .add();

        }
      }
    },

    title: {
      text: 'Highcharts axis visibility'
    },

    xAxis: {
      categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
    },

    yAxis: {
      allowDecimals: false,
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      gridLineWidth: 0,

    },

    plotOptions: {
      series: {
        stacking: 'normal',
        dataLabels: {
          enabled: true
        }
      }
    },

    series: [{
      data: [1, 3, 2, 4],
      name: 'Ola'
    }, {
      data: [5, 4, 5, 2],
      name: 'Kari'
    }]

  });

  var yVis = false,
    xVis = true;

});

#container {
  min-width: 300px;
  max-width: 800px;
  height: 300px;
  margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>

<div id="container"></div>

如何在jquery中显示Y轴（不是它的标签）？

3 个答案: