Chart.js删除第一条垂直线

时间:2016-09-05 03:16:13

标签: javascript reactjs charts chart.js react-chartjs

有没有办法在不删除值的情况下从图表中删除初始垂直线? chart.js remove vertical line

这是我的选项的样子:

scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
                maxTicksLimit: 5,
                suggestedMax: maxValue
            }
        }],
        xAxes : [{
            categoryPercentage: 1.0,
            display : false, // set this to false to hide the labels under the bars
            gridLines: {
                display: false
            }
        }]
    },

2 个答案:

答案 0 :(得分:4)

您要删除的内容可能是图表的边框。在Chart.js v2中,我可以通过为网格线配置drawBorder设置为false来删除此第一个垂直边框:

options: {
    scales: {
        yAxes: [{
            gridLines: {
                drawBorder: false
            }
        }]
    }
}

在Chart.js文档中,http://www.chartjs.org/docs/#scales-common-configuration在子标题“网格线配置”下对其进行了解释。

答案 1 :(得分:1)

尝试使用图表选项scaleLineColor,并将颜色设置为0不透明度:

new Chart(ctx).Bar(data, {
scaleLineColor: 'rgba(0,0,0,0)'
});

http://jsfiddle.net/wb3kcunt/33/

如果您使用的是chartjs v2,那么scales.gridLines中的showBorder选项应该可以解决问题:

options:{
   scales: {
    gridLines:{
      showBorder:false
        }
    }
}

参见文档:

http://www.chartjs.org/docs/#scales