Question

当在高库存中分割每个y轴时，您是否可以有一个单独的图例？我正在使用堆叠的条形图，两个yAx上都运行着相同的数据序列，这在顶部的图例中重复出现，这并不理想-可以将图例分成两部分，将第二个图例放在第二个图的下方yAxis？

如果有人可以在下面的配置中提供建议，我将非常感激-我附上了屏幕抓图，以便您可以看到它的当前外观-我想要第二个绿色的“直接消费” +“收费” +“下图例中的“导出”。非常感谢。

// 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

Highstock double yAxis-图例可以拆分吗？

1 个答案: