Пули в заранее определенных местах в верхней части серии столбцов (не значения в столбцах)

Question

У меня есть диаграмма с серией столбцов, которая охватывает некоторый «временной диапазон» (мс). Для каждого временного диапазона (столбца) я могу легко отобразить список значений времени связанных «вещей», которые не являются частью набора данных временных рядов (как показано в AmCharts - хотя они могли бы быть, я просто понятия не имею, что Я делаю).

Как я могу взять реляционный список значений (на столбец) и отобразить их в виде маркеров в верхней части каждого столбца в моем ColumnSeries?

Моя ось X имеет тип ValueAxis, а моя серия имеет тип ColumnSeries (горизонтальная диаграмма). Я хочу наложить «точки» (круги) поверх каждого столбца / ряда в заранее определенных местах.

Давайте использовать источник данных, такой как следующий

data = [
    {
        "min": 0,
        "max": 100,
        "dots": [10, 40, 80]
    },
    {
        "min": 30,
        "max": 150,
        "dots": [25, 500,110]
    }

]

Это может легко построить очень простую диаграмму Ганта через мин / макс. Шаг, на котором я застрял, - это взять поле dots и использовать его в качестве списка позиций, на которых следует рисовать bullets (am4).

Answer 1

Было бы полезно, если бы вы могли предоставить нам образцы для работы, чтобы вы сами лучше понимали, чего вы хотите достичь.

amCharts v4 предлагает большую мощность и гибкость, что вы можете сделать, это перебрать массив данных, посмотреть, какая наибольшая длина массива dots (если он слишком динамичен, чтобы знать заранее), и сделать это количество пуль. Когда эти маркеры загружаются (bullet.events.on("inited", function(event) { var bullet = event.target; /* magic here */ })), проверьте их данные для массива dots, индекс которого они представляют, и разместите их вдоль оси с помощью осевых методов (например, anyToPoint(), чтобы определить, где находятся координаты может быть для этого.

Определенно выполнимо.

Или вы можете сделать что-нибудь сумасшедшее, например, добавить массивы dots в массив данных либо для диаграммы, либо для отдельной серии "маркеров". Затем вместо нескольких маркеров для каждой точки, как указано выше, просто используйте LineSeries и скрывайте ее линию. Например. где "income" - это поле данных для ColumnSeries, а "expenses" - это поле для LineSeries:

chart.data = [{
        "year": "2005",
        "income": 23.5,
        "expenses": 18.1
    },
    {
        "year": "2005",
        "expenses": 23.1
    },
    {
        "year": "2005",
        "expenses": 28.1
    }, 
    {
        "year": "2006",
        "income": 26.2,
        "expenses": 22.8
    },
    // ...
];

var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.categoryY = "year";
lineSeries.dataFields.valueX = "expenses";
lineSeries.strokeWidth = 0;

Посмотрите на этот форк нашего демо-микса с линейным графиком :

https://codepen.io/team/amcharts/pen/3580a3329f04b8a4387a08c4be7e2f67

Скриншот:

Дайте нам знать, что вы думаете.