流程图渲染错误

Question

我的 Flotchart 渲染不正确，在两个目标浏览器（ie8 和 firefox）中，这个图表在数据前面用网格线渲染

在 Chrome 和 Safari 中根本不会出现任何线条，这是预期的结果。在 Internet Explorer 8 中，图形呈现为 VML，我能够将网格线隔离为 vml 对象，不幸的是，隐藏这些对象所涉及的 CSS 会很棘手，同时仅限于 CSS2，然后这不适用于 Firefox，其中元素的图表不会呈现为单独的元素。

这里是图形代码http://jsfiddle.net/gamm/t3Vqh/2/

var dataset = [overdue, open, completed];

var options = {
    series: {
        stack: true,
        bars: {
            show: true
        }
    },
    bars: {
        align: "center",
        horizontal: false,
        barWidth: .8,
        lineWidth: 0
    },
    grid: {
        borderWidth: 0,
        borderColor: null,
        backgroundColor: null,
        labelMargin: 10,
        minBorderMargin: 10
    },
    yaxis: {
        tickColor: "FFFFFF"
    },
    xaxis: {
        tickColor: "FFFFFF",
        ticks: [
            [1, "Public Works"],
            [2, "Sanitation"],
            [3, "Mayor"],
            [4, "L&I"],
            [5, "Police"]
        ]
    },
    legend: {
        position: 'ne',
        show: true
    }
};

$.plot($("#example-section15 #flotcontainer"), dataset, options);

Answer 1

这里发生了两件事：

1. 看起来 Flot 总是在系列填充上方绘制网格线。这从未被认为是一个错误，因为默认情况下线条非常轻，当条（或线条等）有边框时效果不太明显。

2. 在 IE 中出现黑线的原因是“FFFFFF”不是有效的颜色规范。如果您改为使用“#ffffff”（或“透明”），则 IE 看​​起来与其他浏览器相同，它们更宽容。这不仅限于 IE8 或 Excanvas；甚至 IE10 也无法使用这种格式。

前者可能值得在Github 上作为问题提交，因为它可以说是一个错误。