在我的 vis.js 堆叠条形图中，如何将标签移动到正确位置？

Question

这是我的堆叠条形图的代码：

var barGraphDiv = document.createElement('div');
barGraphCombinedDiv.appendChild(barGraphDiv);
var groups = new vis.DataSet();
groups.add({id: 0, content: "group0",})
groups.add({id: 1, content: "group1",})
groups.add({id: 2, content: "group2",})

var items = [
    {x: '2014-06-11', y: 10, group:0, label: {content: 10, xOffset: -25}},
    {x: '2014-06-12', y: 25, group:0, label: {content: 25, xOffset: -25}},
    {x: '2014-06-13', y: 30, group:0, label: {content: 30, xOffset: -25}},
    {x: '2014-06-14', y: 10, group:0, label: {content: 10, xOffset: -25}},
    {x: '2014-06-15', y: 15, group:0, label: {content: 15, xOffset: -25}},
    {x: '2014-06-16', y: 30, group:0, label: {content: 30, xOffset: -25}},
    {x: '2014-06-11', y: 12, group:1, label: {content: 12, xOffset: -25}},
    {x: '2014-06-12', y: 15, group:1, label: {content: 15, xOffset: -25}},
    {x: '2014-06-13', y: 34, group:1, label: {content: 34, xOffset: -25}},
    {x: '2014-06-14', y: 24, group:1, label: {content: 24, xOffset: -25}},
    {x: '2014-06-15', y: 5,  group:1, label: {content: 5, xOffset: -25}},
    {x: '2014-06-16', y: 12, group:1, label: {content: 12, xOffset: -25}},
    {x: '2014-06-11', y: 22, group:2, label: {content: 22, xOffset: -25}},
    {x: '2014-06-12', y: 14, group:2},
    {x: '2014-06-13', y: 24, group:2, label: {content: 24, xOffset: -25}},
    {x: '2014-06-14', y: 21, group:2, label: {content: 21, xOffset: -25}},
    {x: '2014-06-15', y: 30, group:2},
    {x: '2014-06-16', y: 18, group:2}
];

var dataset = new vis.DataSet(items);
var options = {
    style:'bar',
    stack:true,
    barChart: {width:50, align:'center', sideBySide:true},
    drawPoints: {
        size: 0,
    },
    dataAxis: {
        icons:true
    },
    orientation:'top',
    start: '2014-06-10',
    end: '2014-06-18',
};
var graph2d = new vis.Graph2d(barGraphDiv, items, groups, options);

这会生成如下所示的条形图：

如何让标签与组对齐？基本上标签需要像组一样向上移动。

底部标签位置正确。其他人不是。当我检查元素时，第一个栏看起来像这样：

<rect class="vis-graph-group0 vis-bar" height="33.33333333333337" width="50" y="300" x="1956.375">
</rect>
<rect class="vis-graph-group0 vis-point" height="0" width="0" y="300" x="1981.375">
</rect>
<text y="300" x="1956.375">10</text>
<rect class="vis-graph-group1 vis-bar" height="40.33333333333337" width="50" y="259.66666666666663" x="1956.375">
</rect>
<rect class="vis-graph-group1 vis-point" height="0" width="0" y="293" x="1981.375">
</rect>
<text y="293" x="1956.375">12</text>
<rect class="vis-graph-group2 vis-bar" height="73.33333333333337" width="50" y="186.33333333333326" x="1956.375">
</rect>
<rect class="vis-graph-group2 vis-point" height="0" width="0" y="260" x="1981.375">
</rect>
<text y="260" x="1956.375">22</text>

我注意到文本元素的 y 值需要修改。最底部的文本元素具有正确的 y 值。倒数第二个需要将 y 值更改为前一个文本元素的 y 值 - 栏的高度。

例如，最底部的文本元素的 y 值为 300。下一个文本元素的 y 值为 293，而与该文本值关联的栏的高度为 40.33333。这个y值实际上需要设置为300 - 40.33333 = 259.66667。那么下一个文本元素的y值需要设置为259.66667 - 73.33333 = 186.33334.

我将如何着手完成这项工作？有没有更容易移动标签的方法？

Answer 1

我是 visjs 的开发者之一。这似乎是一个错误。我不确定什么时候会解决这个问题，因为它目前很忙。至于更简单的方法，我不这么认为。如果一切正常，您就不必为此做任何事情。

我们计划对 graph2d 进行大规模重构，但目前我们没有足够的人力在不久的将来进行这项工作。

在我的 vis.js 堆叠条形图中，如何将标签移动到正确位置？

In my vis.js stacked bar chart, how do I move my labels to the correct location?

javascript

vis.js