Question

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

http://i49.tinypic.com/2mo5d8y.png

在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

这里发生了两件事：

看起来Flot总是在系列填充上方绘制网格线。这从来没有被认为是一个错误，因为默认情况下线条非常轻，当条形（或线条等）有边框时效果更不明显。
你在IE中有黑线的原因是因为“FFFFFF”不是有效的颜色规格。如果您使用“#ffffff”（或“透明”），那么IE看起来与其他浏览器相同，这些浏览器更宽容。这不仅限于IE8或Excanvas;甚至IE10也对这种格式感到窒息。

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

flotchart渲染错误

1 个答案: