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

Question

我想实现一个甘特图，我刚刚找到了我需要的 amCharts。他们为甘特图提供 this demo。该示例的问题在于他们正在为 xAxis 使用日期。我需要展示一些进程是如何在 "tick based" 时间轴上执行的，所以我的 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
}];

蜡烛棒系列

然后您可以创建带有烛台系列的甘特图。为了正确显示烛条系列，您必须在系列的数据字段中定义 lowValue、openValue、value 和 highValue：

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

由于您想要的图表不必 "tail"，您可以欺骗 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"
    }
}],
...

想要更高级的东西吗？

为了将低值强调为红色条，您可以在图表中添加另一个使用 low 值的 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/

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

Implementing a Gantt chart with amcharts and interval axis

javascript

amcharts

数据

蜡烛棒系列

想要更高级的东西吗？