javascript - Highstock 双 yAxis - 传说可以拆分吗？

Question

当每个 yAxis 在 highstock 中拆分时，您能否为每个 yAxis 提供单独的图例？我使用的是堆叠条形图，在两个 yAxes 上运行相同的数据系列，这在顶部的图例中重复，这并不理想——图例是否可以一分为二，第二个放在第二个上方y轴？

如果有人可以就下面的配置提出建议，我将非常感激 - 我已经附上了一个屏幕抓图，所以你可以看到它目前的样子 - 我想要第二个绿色“直接消耗”+“充电”+“export' 在下方的图例上。非常感谢。

// Highstock split stacked column chart
    Highstock.setOptions({
      colors: ['#FB654B', '#FFBE6B', '#2FC099', '#2FC099', '#FF8954', '#FCEA6E']
    });

    Highstock.stockChart('container2', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Energy Balance History'
      },
      xAxis: {
      type: 'datetime'
      },
      legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        enabled: true,
        x: 0,
        y: 50
      },
      navigator: {
        height: 30,
        series: {
            data: <%- JSON.stringify(solarValuesDays)  %>
        }
      },
      rangeSelector: {
        buttons: [{
          type: 'week',
          count: 1,
          text: '1w'
        }, {
          type: 'week',
          count: 2,
          text: '2w'
        }, {
          type: 'month',
          count: 1,
          text: '1m'
        }, {
          type: 'all',
          text: 'All'
        }],
        inputEnabled: true, // it supports only days
        selected: 1 // month
      },
      yAxis: [{
        labels: {
          align: 'right',
          x: -3
        },
        min: 0,
        title: {
          text: 'Consumption Energy (kWh)'
        },
        height: '50%',
        // linkedTo: 1,
        lineWidth: 2,
        stackLabels: {
          enabled: true,
          formatter: function () {
            return Highcharts.numberFormat(this.total,2);
          },
          // allowOverlap: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },{
      labels: {
        align: 'right',
        x: -3
      },    
      min: 0,
      title: {
        text: 'Generation Energy (kWh)'
      },
      top: '53%',
      height: '50%',
      linkedTo: 0,
      lineWidth: 2,
      offset: 0,
      // linkedTo: 0,
      stackLabels: {
        enabled: true,
        formatter: function () {
          return Highcharts.numberFormat(this.total,2);
        },
        // allowOverlap: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
      }],
      tooltip: {
        // headerFormat: '<b>Consumption Total: {point.stackTotal}</b><br/><b>Generation Total: {point.stackTotal[1]}</b><br/>',
        pointFormat: '{series.name}: {point.y:.2f}'
      },
      plotOptions: {
        column: {
          stacking: 'normal'
        }
      },
      series: [{
      name: 'Import',
      yAxis: 0,
      data: <%= JSON.stringify(importValuesDays) %>
      }, {
      name: 'Discharge',
      yAxis: 0,
      data: <%=JSON.stringify(dischargeValuesDays)  %>,
      }, {
      name: 'Direct Consumption',
      yAxis: 0,
      data: <%= JSON.stringify(dirConsumptionValuesDays)  %>
      }, {
      name: 'Direct Consumption',
      yAxis: 1,
      data: <%= JSON.stringify(dirConsumptionValuesDays)  %>
      }, {
      name: 'Charge',
      yAxis: 1,
      data: <%=JSON.stringify(chargeValuesDays)  %>
      }, {
      name: 'Export',
      yAxis: 1,
      data: <%= JSON.stringify(exportValuesDays) %>
      }]
    });

Answer 1

默认图例不能拆分，但您可以使用自定义代码重新定位图例项:

var H = Highcharts;

H.wrap(H.Legend.prototype, 'positionItems', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var items = this.allItems;

    items.forEach(function(item, i) {

        if (i > 1) {
            item.legendGroup.attr({
                translateY: 215,
                translateX: item.legendGroup.translateX - this.legendWidth / 4
            });
        } else {
            item.legendGroup.attr({
                translateX: item.legendGroup.translateX + this.legendWidth / 4
            });
        }
    }, this);
});

现场演示:https://jsfiddle.net/BlackLabel/dq0wefL3/

文档:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts