Question

我正在尝试将我的数据显示为每个sku的条形图，每个条形图代表当前库存或预计库存。

目前条形显示为堆叠，但看起来不正确，因为有时投影和电流是相同的，所以它们只是重叠。

如果我将stack更改为false，它仍会保持堆叠状态。

此外，工具提示不会显示在任何栏上。

这里配置错误了什么？

我的小提琴：http://jsfiddle.net/eComEvo/4jjvkvsv/1/

Answer 1

1）堆叠

如果堆叠两个相同的条，它们不会重叠。如果其中一个条形值为负值而另一个条形值为正值，则仅发生重叠。

stack选项属于series选项对象：

    series: {
        bars: {
            show: true,
            align: 'center',
            barWidth: 0.6
        },
        stack: true
    },

当您在此处尝试true和false时，您会看到差异。

如果您不想要任何重叠，您可能需要查看或尝试并排显示（有plugins两个）。

2）工具提示

您有tooltip个选项，但没有可以理解和/或使用它们的工具提示插件。但是你可以在没有插件的情况下简单地构建自己的工具提示。查看更新的fiddle：

$("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #fdd",
    padding: "2px",
    "background-color": "#fee",
    opacity: 0.80
}).appendTo("body");

$("#stock-projections-bar-chart").bind("plothover", function (event, pos, item) {
    if (item) {
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);
        $("#tooltip").html(item.series.label + " of " + x + " = " + y)
            .css({
            top: item.pageY + 5,
            left: item.pageX + 5
        }).fadeIn(200);
    } else {
        $("#tooltip").hide();
    }
});

绘制图表xaxis值重叠而不是堆叠

1 个答案: