将线点与组中的每一列对齐

Question

首先有没有办法让线点与显示的每个季度对齐，我没有找到类似的演示，或者我应该以不同的方式处理它？

第二，是否可以为所有列设置一个图例，这样，当我单击它时，它会隐藏所有列？

现在它只是生长并延伸到我想要的范围之外：https://codepen.io/rKaiser/pen/yLmePJZ

Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Quarterly Data with Aligned Line Graph and Spacing'
},
xAxis: {
    categories: ['2021', '2022', '2023'],
    title: {
        text: null
    },
    // Add spacing between each year group
    tickmarkPlacement: 'on',
    gridLineWidth: 1,
    labels: {
        style: {
            fontSize: '12px'
        }
    }
},
yAxis: {
    min: 0,
    title: {
        text: 'Values'
    }
},
tooltip: {
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        //pointPadding: 0.2, // Padding between individual columns
        //groupPadding: 2.4  // Padding between groups of columns
    }
},
series: [{
    name: 'Q1',
    data: [
        Math.random() * 100, // Q1 2021
        Math.random() * 100, // Q1 2022
        Math.random() * 100  // Q1 2023
    ]
}, {
    name: 'Q2',
    data: [
        Math.random() * 100, // Q2 2021
        Math.random() * 100, // Q2 2022
        Math.random() * 100  // Q2 2023
    ]
}, {
    name: 'Q3',
    data: [
        Math.random() * 100, // Q3 2021
        Math.random() * 100, // Q3 2022
        Math.random() * 100  // Q3 2023
    ]
}, {
    name: 'Q4',
    data: [
        Math.random() * 100, // Q4 2021
        Math.random() * 100, // Q4 2022
        Math.random() * 100  // Q4 2023
    ]
}, {
    name: 'Q1',
    type: 'line',
    data: [
        Math.random() * 100, // Q1 2021
        Math.random() * 100, // Q1 2022
        Math.random() * 100, // Q1 2023
        Math.random() * 100, // Q2 2021
        Math.random() * 100, // Q2 2022
        Math.random() * 100  // Q2 2023
        // need to match the quarters
    ]
}]

});

添加了一张图片，我的意思是：

谢谢！

Answer 1

您可以使用 linkedTo 属性单击一个图例项来隐藏所有系列。

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

演示：https://jsfiddle.net/BlackLabel/up9f5yba/

series: [
    {
      name: "columns series",
      id: "mainColumnSeries",
    },
    {
      name: "Q1",
      linkedTo: "mainColumnSeries",
      showInLegend: false,
      data: [
        Math.random() * 100, // Q1 2021
        Math.random() * 100, // Q1 2022
        Math.random() * 100, // Q1 2023
      ]
    }
]

不幸的是，不可能像这样对齐线点。您可以使用 SVG 渲染器添加这些线条，如下所示：https://jsfiddle.net/BlackLabel/n3xdoj0v/ 或更改创建线条系列的方式，但这些解决方案要求很高。