图表、时间刻度渲染问题

Question

我是 FLOT 图表的新手，我正在尝试创建一个时间刻度水平条形图，如下所示：

当我省略

时，图表显示正确

bars: { show: true }

但是线条非常非常细。我知道可以使用 "barWidth" 选项，但这似乎没有任何效果，除非我包含上面的代码片段。

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

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

如果我省略条形图的 show:true，我的图表看起来像这样，但线条太细了：

非常感谢任何帮助！！！

我的代码是这样的：

包括：

 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。您可以更改此行为：

Lines and points take two coordinates. For filled lines and bars, you can specify a third coordinate which is the bottom of the filled area/bar (defaults to 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 render issue

jquery

graph

flot