省略 highcharts 图表的上边框答案

【问题标题】：omit top border of highcharts chart省略 highcharts 图表的上边框
【发布时间】：2018-08-03 15:57:14
【问题描述】：

我有一个柱形图，我需要绘制图表的左、右和底线（x/y 轴），但需要省略顶线

或者...

画一条白线覆盖顶线。在 Chrome 中查看原始数据，我可以看到该框是使用<rect> 绘制的。

是否可以使用 JS 来定位它并获取 x,y,width 属性来绘制一条白线或将其删除并替换为 3 条黑线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <title>Annual Performance</title>         
        <!-- this code to include Highcharts with jQuery-->         
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>         
        <!-- <script src="/js/jquery.min.js"></script> -->         
        <!--this code is the required highcharts javascript file -->         
        <script src="http://code.highcharts.com/highcharts.js"></script>         
        <!-- <script src="/js/highcharts.js"></script> -->         
        <script src="http://code.highcharts.com/highcharts-3d.js"></script>         
        <script>
$(function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 50,
            plotBorderWidth: 3,

        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{y:.2f} %'
                }
            }
        },
        legend: {enabled: false},
        yAxis: {
            title: {text: null},
            max: 4,
            allowDecimals: false,
            labels: {
                enabled: true,
                formatter: function() {
                    return this.value + ' %';
                }
            }
        },
        title: {
            text: 'Annual Performance'
        },
        subtitle: {
            text: 'XXX Shares'
        },
        series: [{
            data: [
                [2008, 2.17],
                [2009, 0.15],
                [2010, 0.00],
                [2011, 0.00],
                [2012, 0.01],
                [2013, 0.01],
                [2014, 0.01],
                [2015, 0.00],
                [2016, 0.00],
                [2017, 0.38]
            ],
        }]
    });


});
</script>         
    </head>     
    <body> 
        <div id="container" style="width:100%; height:400px;"></div>
    </body>     
</html>

【问题讨论】：

标签： highcharts

【解决方案1】：

您可以创建额外的 yAxis 并使用 lineWidth 和 offset 属性来获得所需的结果：

xAxis: {
  lineWidth: 3
},
yAxis: [{
  lineWidth: 3,
  offset: -2,
  title: {
    text: null
  },
  max: 4,
  allowDecimals: false,
  labels: {
    enabled: true,
    formatter: function() {
      return this.value + ' %';
    }
  }
}, {
  opposite: true,
  title: {
    text: ''
  },
  offset: -2,
  lineWidth: 3,
}],

现场演示：http://jsfiddle.net/BlackLabel/cj497k6s/

API 参考：https://api.highcharts.com/highcharts/xAxis.lineWidth

【讨论】：