Question

我是FLOT排行榜的新手，我正在尝试创建一个像这样的时间刻度水平条形图：

enter image description here

当我省略

时，我已正确显示图表

bars: { show: true }

但线条非常薄。我知道可以使用＆＃34; barWidth＆＃34;选项，但除非我包含上面的代码段，否则这似乎没有任何效果。

我面临的问题是，当我在上面添加片段时，条形图不再呈现在正确的位置，而是现在将自己停靠在页面的左侧，如下所示：

enter image description here

我在下面圈出的区域应该是唯一显示的区域，但是图形生成一个停靠在左侧的区域，如下所示：

enter image description here

如果我省略了对于条形图的show：true，我的图形看起来像这样，但是线条太薄了：

enter image description here

任何帮助都会受到极大的欢迎!!!

我的代码是这样的：

包括：

 qJuery 1.11.1
 jquery.flot.js
 jquery.flot.time.js
 jquery.flot.categories.js

包含图表的div：

<div id="chart_1_2" class="chart"></div>

然后，JS：

var arrSouthStaging = [[gd(2000, 1, 1, 20, 10), 1], [gd(2000, 1, 1, 21, 40), 1]];
var arrNorthStaging = [[gd(2000, 1, 1, 20, 10), 2], [gd(2000, 1, 1, 22, 40), 2]];
var arrMIPETL = [[gd(2000, 1, 1, 22, 30), 3], [gd(2000, 1, 1, 22, 35), 3]];


var tickLabels = [[0, ''], [1, 'South Staging'], [2, 'North Staging'], [3, 'MIP_ETL'], [4, 'Sometimes'], [5, '']];


function gd(year, month, day, hour, min) {
        return new Date(year, month - 1, day, hour, min).getTime();
    }


var dataset = [
        {
            data: arrSouthStaging,
            color: "#FF0000",
            points: { fillColor: "#FF0000", show: false, barWidth: 2 },
            lines: { show: true }
        },
        {
            data: arrNorthStaging,
            color: "#0062E3",
            points: { fillColor: "#0062E3", show: false },
            lines: { show: true }
        },
        {
            data: arrMIPETL,
            color: "#000000",
            points: { fillColor: "#0062E3", show: false },
            lines: { show: true }
        }
    ];


$.plot("#chart_1_2", dataset,
    {
        xaxis: {
            mode: "time",
            minTickSize: [1, "hour"],
            min: (new Date("2000/01/01 20:00")),
            max: (new Date("2000/01/02 10:00")),
            twelveHourClock: false,
            timeformat: "%H:%M",
            font: {
                size: 11,
                weight: "bold",
                family: "Open Sans",
                color: "#333333"
            }
        },
        yaxis: {
            ticks: tickLabels,
            font: {
                size: 11,
                weight: "bold",
                family: "Open Sans",
                color: "#333333"
            },
            align: "left"
        },
        bars: {
            show: true,
            barWidth: 0.3,
            horizontal: true,
            //align: "center",
            //fillColor: { colors: [{ opacity: 1 }, { opacity: 1 }] }
        },
        grid: {
            borderWidth: 1,
            minBorderMargin: 20,
            labelMargin: 20,
            backgroundColor: { colors: ["#fff", "#e4f4f4"] }
        }

    });

Answer 1

默认情况下，flot始终绘制条形图starting from zero。您可以更改此行为：

线和点有两个坐标。对于填充的线条和条形，你可以指定第三个坐标，它是填充的底部区域/栏（默认为0）。

考虑到这一点，您的数据定义将变为：

var arrSouthStaging = [
  [gd(2000, 1, 1, 21, 40), 1, gd(2000, 1, 1, 20, 10)]
];
var arrNorthStaging = [
  [gd(2000, 1, 1, 22, 40), 2, gd(2000, 1, 1, 20, 10)]
];
var arrMIPETL = [
  [gd(2000, 1, 1, 22, 35), 3, gd(2000, 1, 1, 22, 30)]
];

Here's your code with that data.

Flot Charts，Time Scale渲染问题

1 个答案: