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

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

javascript

Javascript 在vis.js堆叠条形图中，如何将标签移动到正确的位置？,javascript,vis.js,Javascript,Vis.js,以下是我的堆叠条形图的代码： 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:

以下是我的堆叠条形图的代码：

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);

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

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

底部标签位于正确的位置。其他人则不然。执行inspect元素时，第一个条如下所示：

<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>


10
12
22

我注意到文本元素的y值需要修改。最底部的文本元素具有正确的y值。底部的下一个需要将y值更改为上一个文本元素的y值—条的高度

例如，最底部的文本元素的y值为300。下一个文本元素的y值为293，而与该文本值关联的条形图的高度为40.33333。该y值实际上需要设置为300-40.33333=259.66667。然后，需要将下一个文本元素的y值设置为259.66667-73.33333=186.33334

我将如何着手实现这一点？有没有更容易改变标签的方法？

我是visjs的开发人员之一。这似乎是一个错误。我不确定什么时候能修好，因为现在很忙。至于更简单的方法，我不这么认为。如果一切正常，你不必为此做任何事情

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

我是visjs的开发者之一。这似乎是一个错误。我不确定什么时候能修好，因为现在很忙。至于更简单的方法，我不这么认为。如果一切正常，你不必为此做任何事情

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

谢谢你的回复，亚历克斯！希望我能自己或者其他人能够解决这个问题。祝重构好运！PS，你想让我提交一份bug报告吗？所以我想出了一种方法来更改所有标签的y值并手动移动它们。但是，一旦我的代码完成，在所有y值更改后，所有标签都会移回其原始位置。你知道发生了什么吗？组件中有一个重新绘制的循环。它原来是一个小错误，所以我已经修复了它，并将修复推给了我们的开发分支。我们将在下一版本中添加它。感谢Alex的回复！希望我能自己或者其他人能够解决这个问题。祝重构好运！PS，你想让我提交一份bug报告吗？所以我想出了一种方法来更改所有标签的y值并手动移动它们。但是，一旦我的代码完成，在所有y值更改后，所有标签都会移回其原始位置。你知道发生了什么吗？组件中有一个重新绘制的循环。它原来是一个小错误，所以我已经修复了它，并将修复推给了我们的开发分支。我们将在下一版本中添加它。感谢Alex的回复！希望我能自己或者其他人能够解决这个问题。祝重构好运！PS，你想让我提交一份bug报告吗？所以我想出了一种方法来更改所有标签的y值并手动移动它们。但是，一旦我的代码完成，在所有y值更改后，所有标签都会移回其原始位置。你知道发生了什么吗？组件中有一个重新绘制的循环。它原来是一个小错误，所以我已经修复了它，并将修复推给了我们的开发分支。我们将在下一版本中添加它。感谢Alex的回复！希望我能自己或者其他人能够解决这个问题。祝重构好运！PS，你想让我提交一份bug报告吗？所以我想出了一种方法来更改所有标签的y值并手动移动它们。但是，一旦我的代码完成，在所有y值更改后，所有标签都会移回其原始位置。你知道发生了什么吗？组件中有一个重新绘制的循环。它原来是一个小错误，所以我已经修复了它，并将修复推给了我们的开发分支。我们将在下一版本中添加它。