JQuery 很好地删除栏边框

Question

这是我的 jsFiddle

如何删除边框或与条形相同（而不是更暗）？

编辑：实际上，我需要完全删除边框。这可能吗？

    var chartOptions = {
            xaxis: { ticks: chartTicks },
            grid: { clickable: true, hoverable: true },
    series: { stack: true, bars: { fill: '#000', show: true, align:'center', barWidth: 0.5 } }
        };

Answer 1

我不是 100% 确定您是否要删除图形或条形图周围的边框。 jsFiddle here 完成了这两项工作，下面将对代码进行解释。

删除栏周围的边框。将 lineWidth 提供给 bars，如下例所示。

var chartOptions = {
    xaxis: {
        ticks: chartTicks
    },
    grid: {
        clickable: true,
        hoverable: true
    },
    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5,
            lineWidth: 0
        }
    }
};

去除图表周围的边框。将 borderWidth 提供给 grid 您可以设置 borderWidth: 0 或者您可以指定每个宽度，如下例所示。

var chartOptions = {
    xaxis: {
        ticks: chartTicks
    },
    grid: {
        clickable: true,
        hoverable: true,
        borderWidth: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        }
    },
    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5
        }
    }
};

Answer 2

您可以使用 lineWidth 选项删除条形图的轮廓/边框和/或 fillColor 选项更改填充（这也可用于 gradients ):

    series: {
        stack: true,
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.5,
            lineWidth: 0,
            fillColor: {
                colors: [{
                    opacity: 1.0
                }, {
                    opacity: 1.0
                }]
            }
        }
    }

查看此 fiddle 示例。

Answer 3

要删除图表中条形的边框，您可以将 lineWidth: 0 添加到选项中的 bars 对象。

series: {
    stack: true,
    bars: {
        lineWidth: 0,
        show: true,
        align: 'center',
        barWidth: 0.5
    }
}

Here正在行动

顺便说一下，这可以在 API 文档 here 中找到。

JQuery 很好地删除栏边框

JQuery flot remove bar border

javascript

jquery

flot