用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
}];

蜡烛棒系列

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

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

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

小提琴： https://jsfiddle.net/davidliang2008/kLzh49fv/

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

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

想要更好的东西吗？

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

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

小提琴： https://jsfiddle.net/davidliang2008/cse496zg/