如何在y轴高图表上为图表两侧添加不同的标签

Question

我们有一个由 2 个面积图和 1 个折线图组合而成的图表，面积图的 y 轴标签应位于左侧，折线图标签应位于右侧。这里的系列值是动态的。当我们尝试具有相反属性的标签时，两侧都采用相同的标签。但对于图表的另一侧，我们希望根据系列有不同的标签，那么我们如何实现这种高图表组合。

const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
                        chart: {
                            height: '312',
                            borderColor: '#FFFFFF',
                            borderWidth: 1,
                            borderRadius: 8,
                           events: {
                              load(this: any) {
                                this.yAxis[0].setTitle({
                                    text: "Amount (" +currency + ')'
                                })
                                this.yAxis[1].setTitle({
                                    text: "Score"
                                })
                              }
                            },
                        },
                     //   colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           startOnTick: true,
                    endOnTick: true,
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#000000'
                            }
                        },
                        legend: {
                          itemStyle: {
                            color: '#2C3241',
                            'font-family': 'ProximaNova-Semibold',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            'line-height': '16px',
                            width: '100%',
                            "margin-right": '50px'
                          },
                          symbolWidth: 10,
                          symbolHeight: 10
                        },
                         yAxis: [{
                          min: 0,
                          labels: {
                           // align: 'left',
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px',
                              textOverflow: 'none',
                            }
                          }

                        } , {
                          min: 0,
                          linkedTo: 0,
                          opposite: true,
                          labels: {
                         //   align: 'right',
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px',
                              textOverflow: 'none',
                            }
                          }

                        }],

                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },

                        colors: this.kpiMainColorsData,

                        
                        series: this.kpiSeriesDataObj


        }as any);

预期图表的行为如下

Answer 1

您可以通过设置系列内的 y 轴索引或 id 将线系列分配给相反的轴：

{
    type: 'line',
    yAxis: 1
    data: [5, 2, 3, 10, 6]
}

演示：https://jsfiddle.net/BlackLabel/3q9mw8jk/

API： https://api.highcharts.com/highcharts/series.line.yAxis