是否可以在每个类别上混合使用水平线的列？

Question

我知道如何通过更改我的一些图表来改善用户体验。基本上我有一个柱形图，我在其中显示每个类别的一些值。我显示的最后一个值是平均值。

我想在每个类别中将平均值显示为虚线。

Paint picture of idea displayed as a single category

我已经阅读文档的次数比我愿意承认的要多，但我仍然没有找到合适的解决方案。我最好的尝试是在 'scatter' 系列中重载圆形符号，然后将其重绘为 SVG。

有人知道我应该如何处理它吗？我觉得必须有这个选项，我只是见树不见林。

此致，

Answer 1

您可以将 line 系列类型与计算数据一起使用：

const averageData = [3.33, 3.33, 3.66];
const processedAverageData = [];

averageData.forEach((val, index) => {
    processedAverageData.push([index - 0.4, val], [index + 0.4, val]);
    // To create gaps between categories
    processedAverageData.push(null);
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category'
    },
    series: [{
        ...
    }, {
        ...
    }, {
        ...
    }, {
        type: 'line',
        data: processedAverageData,
        dashStyle: 'dash',
        marker: {
            enabled: false
        }
    }]
});

现场演示： http://jsfiddle.net/BlackLabel/t3ejqvun/

API参考：https://api.highcharts.com/highcharts/series.line

是否可以在每个类别上混合使用水平线的列？

Is it possible to mix columns with a horizontal line on each category?

highcharts