Flot Charts，时间刻度渲染问题答案

【问题标题】：Flot Charts, Time Scale render issueFlot Charts，时间刻度渲染问题
【发布时间】：2015-01-31 00:31:18
【问题描述】：

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

当我省略

时，我的图表显示正确

bars: { show: true }

但是线条非常非常细。我知道可以使用“barWidth”选项，但这似乎没有任何效果，除非我包含上面的 sn-p。

我面临的问题是，当我包含上面的 sn-p 时，条形不再呈现在正确的位置，而是现在将自己停靠在页面的左侧，如下所示：

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

如果我省略条形的 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"] }
        }

    });

【问题讨论】：

标签： jquery graph flot

【解决方案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.

【讨论】：