Question

我需要以下图表的帮助，是一个带有多轴的多个系列，我需要堆叠一些条形图而不需要其他条形图。我粘贴代码，这是一个演示http://jsfiddle.net/Willem/aAb3E/17/

这是我的第一个轴数据（未堆叠的线）：

var data1 = [
[1375302600000, 33],
[1375300800000, 26]
];
var data2 = [
[1375302600000, 0],
[1375300800000, 12]
];

这些是条形图（按用户和日期（第一个值）堆叠）：

var user1_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user1_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user1_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];

var user2_estado1 = [
[1375302600000, 20],
[1375300800000, 40]
];
var user2_estado2 = [
[1375302600000, 10],
[1375300800000, 90]
];
var user2_estado3 = [
[1375302600000, 30],
[1375300800000, 70]
];

我按系列设置数据集选项; data1和data2没有条形和堆栈错误;其他栏显示：true和订单设置因为我希望它们按用户和日期时间进行索引。

var dataset = [{
    label: "Answer",
    data: data1,
    bars: {
        show: false
    },
    stack: false,
    xaxis: 2
}, {
    label: "Not answer",
    data: data2,
    bars: {
        show: false
    },
    stack: false,
    xaxis: 2
}, {
    label: "User1_estado1",
    data: user1_estado1,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User1_estado2",
    data: user1_estado2,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User1_estado3",
    data: user1_estado3,
    bars: {
        show: true,
        order:1
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado1",
    data: user2_estado1,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado2",
    data: user2_estado2,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}, {
    label: "User2_estado3",
    data: user2_estado3,
    bars: {
        show: true,
        order:2
    },
    xaxis: 1,
    yaxis: 2,
}];

绘制它们，设置barwith（每半个时间）这个我不知道如何调整:(和不同的轴，xaxes现在按时间但我需要xaxe1来显示每个用户。

var plot = $.plot(
$("#placeholder"), dataset, {
series: {
    bars: {
        barWidth: 60*30*1000,
        align: "center",
        fill: true,
    },
    //pointLabels:{show:true, stackedValue: true},
},
grid: {
    hoverable: true,
    clickable: true,
    tickColor: "#f9f9f9",
    borderWidth: 2,
    mouseActiveRadius: 10
},
xaxes: [{
    show: true,
    mode: "time",
    timeformat: "%H:%M",
    tickSize: [0.5, "hour"],
    axisLabel: "Usuario",
    axisLabelFontSizePixels: 3,
    axisLabelPadding: 5
}, {
    show: true,
    mode: "time",
    timeformat: "%H:%M",
    tickSize: [0.5, "hour"],
    axisLabel: "Usuarios ocupados",
    axisLabelFontSizePixels: 3,
    axisLabelPadding: 5
}],
yaxes: {
    color: "black",
    axisLabel: "Usuarios ocupados",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 8,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 5,
    tickDecimals: 0
}
});

在这里，我向图表中添加了一些互动信息，显示了一些工具提示。

var previousPoint = null,
previousLabel = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
        previousPoint = item.dataIndex;
        previousLabel = item.series.label;
        $("#tooltip").remove();

        var x = new Date(item.datapoint[0]);
        var y = item.datapoint[1];
        var color = item.series.color;

        showTooltip(item.pageX, item.pageY, color,
            "<strong>" + item.series.label + "</strong><br>" + (x.getMonth() + 1) + "/"     + x.getDate() +
            " : <strong>" + y + "</strong> llamadas");
    }
} else {
    $("#tooltip").remove();
    previousPoint = null;
}
});

function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
    position: 'absolute',
    display: 'none',
    top: y - 40,
    left: x - 30,
    border: '2px solid ' + color,
    padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
    opacity: 0.9
}).appendTo("body").fadeIn(200);
}

我的问题是每个用户和时间对齐条形（更好地堆叠）并且不堆叠两条线。我还想在axis1中显示用户的刻度（而不是时间）。

您可以在此处查看http://jsfiddle.net/Willem/aAb3E/17/

请为此提供一些帮助：）。

非常感谢！

Answer 1

为防止线条堆叠，请删除一些您并不真正需要的选项：

var dataset = [{
    label: "Answer",
    data: data1,
    xaxis: 2
}, {
    label: "Not answer",
    data: data2,
    xaxis: 2
}, ...

说实话，我并不完全确定为什么'假'导致它们叠加;这似乎是一个错误，但无论如何只需删除该选项即可解决问题，因为默认情况下不会堆叠。

我不清楚'每个用户和时间对齐条形码'是什么意思;你能解释一下吗？

多轴flot chart带有顺序堆叠条，不堆叠既不调整条位置

1 个答案: