0

我需要以下图表的帮助，它是一个带有多轴的多系列，我需要堆叠一些条形，而另一些则不需要。我粘贴代码，这是一个演示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);
}

我的问题是对齐每个用户和时间的条（最好堆叠）并且不堆叠两条线。我还喜欢在轴 1 中显示用户的刻度（而不是时间）。

你可以在这里看到它http://jsfiddle.net/Willem/aAb3E/17/

请需要一些帮助来驱动这个:)。

非常感谢！

4

1 回答 1

0

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

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

老实说，我不完全确定为什么“假”会导致它们堆叠；这似乎是一个错误，但无论如何只需删除该选项即可解决问题，因为默认设置是不堆叠。

我不清楚“按用户和时间对齐条形”是什么意思；你可以解释吗？

于 2013-10-14T02:12:36.060 回答