删除水平条形图中的顶部水平线（Chart.js 2）

Question

我在Chart.js中创建了一个水平组合的条形图，但我陷入了一个奇怪的问题。 问题是，虽然我禁用了所有的网格线和边界，但图表仍显示出我想摆脱的顶部水平线。 在此屏幕截图中可以看到：http://imgur.com/41YGxA8。 我也能发的jsfiddle：https://jsfiddle.net/bsocw1v9/

function create_horizontal_bar_chart(){ 
/** 
* Draw the chart on the correct canvas. Add the correct data sets 
* and set the correct draw type. 
*/ 
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d"); 
let data = { 
labels: ['Diensten'], 
datasets: [ 
    { 
     type: 'horizontalBar', 
     backgroundColor: "rgb(0,33,86)", 
     data: [2250], 
     stack: 1 
    }, 
    { 
     type: 'horizontalBar', 
     backgroundColor: "rgb(219,219,219)", 
     data: [3000], 
     stack: 2 
    }, 
    { 
     type: 'horizontalBar', 
     backgroundColor: "rgb(240,95,0)", 
     data: [750], 
     stack: 3 
    }, 
] 
}; 
new Chart(ctx, { 
    type: 'horizontalBar', 
    data: data, 
    showScale: false, 
    options: { 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: false 
     }, 
     hover: { 
      mode: null 
     }, 
     scales: { 
      xAxes: [{ 
       stacked: true, 
       display: false, 
       gridLines: { 
        drawBorder: false, 
       }, 
      }], 
      yAxes: [{ 
       stacked: true, 
       barPercentage: 0.9, 
       gridLines: { 
        drawBorder: false, 
       }, 
      }] 
     } 
    } 
}); 

}

我希望有人能够帮助我解决这个问题，因为我根本无法弄清楚什么导致此。

Answer 1

您只在图表边缘禁用边框（通过将drawBorder设置为false），而不是网格线。错误的线是网格线。在“网格线配置”

gridLines: { 
    display: false 
} 

看那docs：要为轴线使用禁用网格线。