javascript - 使用 amcharts 和间隔轴实现甘特图

Question

我想实现一个甘特图，我刚刚找到了 amCharts，它看起来像我需要的。他们提供this demo对于甘特图。该示例的问题在于他们使用日期作为 xAxis。我需要展示一些进程是如何在“基于刻度”的时间轴上执行的，因此我的 xAxis 的值将是 1, 2, 3, 4, 5, 6...

我发现有不同类型的轴类型可用，但 valueAxis 的问题是我无法从一个值到另一个值绘制一列，因此我无法显示从与 0 不同的位置开始的范围.

有什么方法可以实现我想要用 amCharts 做的事情吗？

这是我想要做的事情的图形示例:

Answer 1

我不确定那个红色小条是什么意思，但你的图表看起来像带有烛台的甘特图。

数据

假设红色条是您的最低值，那么您可能会得到如下所示的数据:

let data = [{
    name: "A",
    open: 0,
    close: 3
}, {
    name: "B",
    low: 2,
    open: 3,
    close: 9
}, {
    name: "C",
    low: 4,
    open: 9,
    close: 13
}, {
    name: "D",
    low: 6,
    open: 15,
    close: 20
}, {
    name: "E",
    low: 8,
    open: 13,
    close: 15
}];

烛台系列

然后您可以创建带有烛台系列的甘特图。为了使烛台系列正确显示，您必须在该系列的数据字段:

...,
series: [{
    type: "CandlestickSeries",
    dataFields: {
        categoryY: "name",
        lowValueX: "low",
        openValueX: "open",
        valueX: "close",
        highValueX: "close"
    }
}],
...

由于您想要的图表不必是“尾部”，因此您可以欺骗 amchart4 并将 close 值用作 highValue。

fiddle : https://jsfiddle.net/davidliang2008/kLzh49fv/

如果您不分配 highValue 字段，则范围将始终从 0 开始:

...,
series: [{
    type: "CandlestickSeries",
    dataFields: {
        categoryY: "name",
        lowValueX: "low",
        openValueX: "open",
        valueX: "close",
        //highValueX: "close"
    }
}],
...

想要一些更奇特的东西吗？

要强调红色条中的低值，您可以在图表中添加另一个使用低值的StepLineSeries:

...,
series: [{
    type: "CandlestickSeries",
    ...
}, {
    type: "StepLineSeries",
    noRisers: true,
    dataFields: {
        categoryY: "name",
        valueX: "low"
    },
    stroke: "#e62e00",
    strokeWidth: 4,
    startLocation: .3,
    endLocation: .7
}],
...

fiddle : https://jsfiddle.net/davidliang2008/cse496zg/