有没有办法在Highcharts中拆分/爆炸和重新分组线

Question

我有一个包含多行的图表。根据用户请求，我想使图表更易读（更少行）或更详细（更多行）。这意味着，例如会有一个按钮“分割线”和“组线”。 现在，在考虑这个问题时，我想这不是一个内置功能，而是一个jQuery函数，然后显示相应的行。然而，拥有线条分割或分组的视觉效果会很不错。

所以，它应该从这里开始：

到这里：

我已经提出fiddle here来展示它，并对你的想法，经验和解决方法感到好奇。

代码，在这里没有用处：

$(function() {
$('#container').highcharts({

    title: {
        text: "xxx",
        align: "center",
        y: 20,
        x: 0,
        style: {
            fontSize: "28px",
            color: (Highcharts.theme && Highcharts.theme.textColor) || "black"
        }
    },
    subtitle: {
        text: "",
        align: "center",
        x: -40,
        style: {
            fontSize: "13px",
            color: "#666666"
        }
    },
    xAxis: {
        tickWidth: 0
    },
    yAxis: {
        title: {
            text: "xxx",
            align: "high",
            rotation: 0,
            textAlign: 'left',
            x: 10,
            y: -20,
            style: {
                fontWeight: "bold"
            }
        },
        gridLineWidth: 0
    },
    credits: {
        href: "",
        text: "",
        position: {
            x: -185
        },
        style: {
            fontSize: "8px",
            color: "#666666"
        }
    },
    legend: {
        enabled: true,
        layout: "vertical",
        align: "right",
        verticalAlign: "top",
        y: 55,
        reversed: true,
        itemStyle: {
            color: '#777',
            fontWeight: 'normal',
            fontSize: '12px'
        }
    },
    data: {
        csv: document.getElementById('csv').innerHTML
    },
    plotOptions: {
        series: {
            connectNulls: true,
            shadow: false,
            lineWidth: 2,
            //color: 'rgba(100, 100, 100, 0.2)',
            marker: {
                enabled: false
            }
        }
    }
});
});