Highcharts 同时显示两个不同的数据系列的坐标轴(分离轴)

需求

分离轴是在图表中使用多个 Y 轴来展示不同的数据序列，每个 Y 轴可以有自己的刻度、标签和样式。可以帮助我们在一个图表中同时展示两个或更多不同单位或数量级的数据，并且使得数据更易于比较和分析。

分析

使用 Highcharts 的分离轴功能，您可以通过以下步骤来实现：

1. 在 Highcharts 的配置对象中，为每个需要分离的数据序列指定一个独立的 Y 轴，可以使用 yAxis 数组来定义多个 Y 轴。
2. 在每个独立的 Y 轴的配置中，您可以通过设置 opposite 属性为 true 来将 Y 轴显示在图表的右侧。
3. 您可以通过设置每个 Y 轴的 labels、title 和 tickPositions 属性来定制每个 Y 轴的刻度、标签和样式。

解决

代码示例：

Highcharts.chart('container', {

    // 图表配置...

    yAxis: [{

        title: {

            text: '数据1'

        },

        // 其他配置...

    }, {

        title: {

            text: '数据2'

        },

        opposite: true,

        // 其他配置...

    }],

    series: [{

        name: '数据1',

        yAxis: 0,

        // 数据...

    }, {

        name: '数据2',

        yAxis: 1,

        // 数据...

    }]

});

效果图：

在上面的示例中，我们通过 yAxis 数组定义了两个 Y 轴，第一个 Y 轴显示在图表的左侧，第二个 Y 轴显示在图表的右侧。

Highcharts还提供了丰富的配置选项，可以自定义图表的外观和交互效果，以满足不同的需求。

希望这些信息对大家有所帮助！如果您有任何其他问题，请随时提问。