Реализация диаграммы Ганта с амхартами и интервальной осью - PullRequest
Новая
       18

Реализация диаграммы Ганта с амхартами и интервальной осью

0 голосов
/ 02 декабря 2018

Я хочу реализовать диаграмму Ганта, и я только что нашел amCharts, который выглядит так, как мне нужно.Они предоставляют это демо для диаграмм Ганта.Проблема с этим примером заключается в том, что они используют даты для xAxis.Мне нужно показать, как некоторые процессы выполняются на «тиковой» временной шкале, чтобы значения для моего xAxis были 1, 2, 3, 4, 5, 6 ...

Я обнаружил, что есть разныевиды осей доступны, но проблема с valueAxis заключается в том, что я не могу нарисовать столбец из значения в другое, поэтому я не могу показать диапазоны, начинающиеся с позиции, отличной от 0.

Есть лиЛюбой способ добиться того, что я хочу сделать с amCharts?

Это графический пример того, что я хочу сделать:

enter image description here

1 Ответ

0 голосов
/ 02 декабря 2018

Я не уверен, что означает этот красный маленький столбик, но ваш график выглядит как диаграмма Ганта со свечой.

Данные

Если предположить, что красная полоса - это ваш минимум, тогда вы можетеесть данные, которые выглядят следующим образом: 

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.

enter image description here

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

Если вы не назначите поле highValue, диапазон всегда будет начинаться с 0: 

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

enter image description here

Хотите что-нибудь более изумительное?

Чтобы выделить низкое значение красной полосой, вы можете добавить еще один StepLineSeries, который использует значения low, на диаграмму: 

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

enter image description here

скрипка: https://jsfiddle.net/davidliang2008/cse496zg/

...