JQuery flot刪除欄邊框

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

您可以使用lineWidth選項刪除條形的輪廓/邊框和/或fillColor選項以更改填充（這也可用於漸變 ）：

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

看一下這個小提琴的例子。

Answer 2

要從圖形中的條形移除邊框，可以將lineWidth: 0添加到選項中的bars對象。

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

這是在行動。

這可能在API文檔中找到這里 ，順便說一句。

Answer 3

如果你想刪除圖表或條形圖邊框，我不是100％確定。 這里的jsFiddle完成了兩個，代碼解釋如下。

---

刪除欄周圍的邊框。 供應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
        }
    }
};

---

從圖表周圍刪除邊框。 為grid提供borderWidth你可以設置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
        }
    }
};