Anychart如何实现jump line与多系列柱状图组合，为每根柱子配置jump line？

该需求完全可以实现。你当前的代码仅配置了一条全局的jump line映射，因此只能每个分组生成一条。要实现为每根柱子单独配置对应的jump line，只需要为每个柱状系列单独创建对应的jump line数据映射、单独实例化jump line系列即可。

修改后示例代码 #

anychart.onDocumentReady(function () {
    // 新增对应两个柱状系列的jump line数值列
    var data = [
        ["January", 12000, 10000, 8100, 7200],
        ["February", 15000, 12000, 8200, 7600],
        ["March", 16000, 18000, 8300, 8000],
    ];

    var dataSet = anychart.data.set(data);
    // 两个柱状系列的映射
    var mapping1 = dataSet.mapAs({x: 0, value: 1});
    var mapping2 = dataSet.mapAs({x: 0, value: 2});
    // 分别为两个柱状系列创建对应的jump line映射
    var jumpForSeries1 = dataSet.mapAs({x: 0, value: 3});
    var jumpForSeries2 = dataSet.mapAs({x: 0, value: 4});

    var chart = anychart.column();

    var series1 = chart.column(mapping1);
    var series2 = chart.column(mapping2);

    // 实例化两个独立的jump line系列，分别对应不同的柱状系列
    var jumpLine1 = chart.jumpLine(jumpForSeries1);
    jumpLine1.stroke("3 #FFFF00"); // 对应第一个柱状系列的jump line样式
    var jumpLine2 = chart.jumpLine(jumpForSeries2);
    jumpLine2.stroke("3 #00FFFF"); // 对应第二个柱状系列的jump line样式

    chart.container("container");
    chart.draw();
});

核心说明 #

• 你可以根据实际需要给每个jump line单独配置样式、提示框等属性，方便和对应的柱状系列做关联区分
• 如果需要jump line的位置和对应柱子完全对齐，可以调整jump line系列的xOffset属性做微调，适配多系列柱的偏移位置

内容的提问来源于stack exchange，提问作者Domenico Santoro