图例项模式旋转或镜像问题

Question

，

1. ，这是对先前一个问题的后续回答.你会注意到传说中的风模式是旋转的。使用css覆盖来尝试修复这个问题有意义吗？是否与压倒一切进行了权衡？

如果我不能在不破坏键盘导航的情况下使用

1. ，那么在yAxis上也不能使用reverseChart。是否有另一种方法来反转此图表，使图例与您在上面的图表中所看到的一致？

​

Highcharts.setOptions({
  colors: ['#E56D0B', '#552450', '#8A6889', '#00558B', '#00a2c5', '#004b45', '#6Ba333']
});

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    scrollablePlotArea: {
      minWidth: 800,
      scrollPositionX: 0
    }
  },
  title: {
    text: 'some title'
  },
  subtitle: {
    text: 'some subtitle'
  },
  xAxis: {
    categories: ["2005", "2013", "2017", "2027"]
  },
  yAxis: {
    max: 100,
    min: 0,
    title: {
      text: "Carbon Emission Reduction"
    }
  },
  accessibility: {
    enabled: true,
    keyboardNavigation: {
      order: ['series', 'legend', 'chartMenu']
    },
    screenReaderSection: {
      beforeChartFormat: '<h3>{chartTitle}</h3><div>{typeDescription}</div><div>{chartSubtitle}</div><div>{chartLongdesc}</div><div>{playAsSoundButton}</div><div>{viewTableButton}</div><div>{xAxisDescription}</div><div>{yAxisDescription}</div><div>{annotationsTitle}{annotationsList}</div>'
    }
  },
  legend: {
    squareSymbol: true,
    symbolHeight: 20,
    itemMarginBottom: 10
  },
  tooltip: {
    valueSuffix: '%'
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      events: {
        legendItemClick: function() {
          false;
        }
      }
    }
  },
  series: [
  {
    name: "Coal",
    data: [
      56,
      46,
      37,
      19
    ]
  },
  {
    name: "Natural Gas",
    data: [
      23,
      23,
      23,
      21
    ],
    color: {
      pattern: {
        path: {
          d: "M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0",
          strokeWidth: 3
        },
        width: 10,
        height: 10,
        opacity: 1,
        backgroundColor: "#F8CAF1"
      }
    }
  },
  {
    name: "Nuclear",
    data: [
      12,
      11,
      13,
      12
    ]
  },
  {
    name: "Wind",
    data: [
      3,
      15,
      21,
      38
    ],
    color: {
      pattern: {
        path: {
          d: "M 3 0 L 3 10 M 8 0 L 8 10",
          strokeWidth: 3
        },
        width: 10,
        height: 10,
        opacity: 1,
        backgroundColor: "#B3FEF8"
      }
    }
  },
  {
    name: "Solar",
    data: [
      0,
      0,
      2,
      8
    ]
  },
  {
    name: "Biomass",
    data: [
      1,
      1,
      1,
      1
    ],
    color: {
      pattern: {
        path: {
          d: "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11",
          strokeWidth: "3"
        },
        width: "10",
        height: "10",
        opacity: "1",
        backgroundColor: "#EAFFB2"
      }
    }
  }
]
})

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

#chart-container {
    height: 400px;
    margin: auto;
}

.highcharts-data-table table {
    font-family: Roboto;
    border-collapse: collapse;
    border: 1px solid #F6F8FB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #797D83;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em 0;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em 0;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #F6F8FB;
}
.highcharts-data-table tr:hover {
    background: #F6F8FB;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/venn.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

​

Answer 1

1. 是的，我认为使用CSS将是修复它的最佳选择。

1. 您可以使用legend.reversed特性来实现它.

演示：https://jsfiddle.net/BlackLabel/9mn62pcs/

  legend: {
    squareSymbol: true,
    symbolHeight: 20,
    itemMarginBottom: 10,
        reversed: true
  },

API：https://api.highcharts.com/highcharts/legend.reversed

此外，我还发现，如果您希望将模式从前面的问题中保留下来，您可以为每个系列定义series.index，以决定点呈现顺序。

演示：https://jsfiddle.net/BlackLabel/4oc9ew5x/