Question

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

internal class Foo
{
    public int i;
    public long value;
    private int state = 0;
    private Task<int> task;
    int result0;
    public Task Bar()
    {
        var tcs = new TaskCompletionSource<object>();
        Action continuation = null;
        continuation = () =>
        {
            try
            {
                if (state == 1)
                {
                    goto state1;
                }
                for (i = 0; i < 10; i++)
                {
                    Task<int> task = SomeExpensiveComputation(i);
                    var awaiter = task.GetAwaiter();
                    if (!awaiter.IsCompleted)
                    {
                        awaiter.OnCompleted(() =>
                        {
                            result0 = awaiter.GetResult();
                            continuation();
                        });
                        state = 1;
                        return;
                    }
                    else
                    {
                        result0 = awaiter.GetResult();
                    }
                state1:
                    Console.WriteLine(value);
                }
                Console.WriteLine("Done!");
                tcs.SetResult(true);
            }
            catch (Exception e)
            {
                tcs.SetException(e);
            }
        };
        continuation();
    }
}

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

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

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

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

我注意到需要修改文本元素的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堆积条形图中，如何将标签移动到正确的位置？

1 个答案: