项目符号位于列系列顶部的预定位置(不是列系列值)

时间:2019-06-19 02:45:55

标签: javascript amcharts4

我有一个带有列系列的图表,该系列跨越一些“时间范围”(毫秒)。对于每个时间范围(条形图),我都可以轻松地映射不属于时间序列数据集(如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)的位置的列表。

1 个答案:

答案 0 :(得分: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;

查看我们的Bar and line chart mix demo的此分支:

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

屏幕截图:

screenshot of LineSeries simulating various bullets superimposed over ColumnSeries

让我们知道您的想法。