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

这是之前回答的问题的后续。您会注意到图例中的风模式是旋转的。使用css覆盖来尝试修复这个问题有意义吗？是否存在与覆盖的权衡

另外，如果我不能在yAxis上使用reverseChart而不破坏键盘导航。是否有其他方法可以反转此图表，使图例与您在上图中看到的图形对齐

Highcharts.setOptions({
颜色：[“E56D0B”、“552450”、“8A6889”、“00558B”、“00a2c5”、“004b45”、“6Ba333”]
});
Highcharts.chart（'容器'{
图表：{
类型：'bar'，
可滚动绘图区：{
最小宽度：800，
滚动位置X:0
}
},
标题：{
文本：“一些标题”
},
副标题:{
文字：“一些字幕”
},
xAxis：{
类别：[“2005”、“2013”、“2017”、“2027”]
},
亚克斯：{
最高：100，
分:0,，
标题：{
案文：“减少碳排放”
}
},
可访问性：{
启用：对，
键盘导航：{
顺序：[“系列”、“图例”、“图表菜单”]
},
屏幕阅读器部分：{
beforeChartFormat:“{chartTitle}{typeDescription}{chartSubtitle}{chartLongdesc}{playAsSoundButton}{viewTableButton}{xAxisDescription}{yAxisDescription}{annotationsTitle}{annotationsList}”
}
},
图例：{
是的，
符号高度：20，
项目MarginBottom:10
},
工具提示：{
值后缀：''
},
打印选项：{
系列：{
堆叠：“正常”，
活动：{
legendItemClick:函数（）{
虚假的；
}
}
}
},
系列：[
{
名称：“煤”，
数据：[
56,
46,
37,
19
]
},
{
名称：“天然气”，
数据：[
23,
23,
23,
21
],
颜色：{
模式：{
路径：{
d:“M 5 5 M-40 a 4 0 1 1 8 0 a 4 4 0 1 1-8 0”，
冲程宽度：3
},
宽度：10，
身高：10，
不透明度：1，
背景颜色：“F8CAF1”
}
}
},
{
名称：“核”，
数据：[
12,
11,
13,
12
]
},
{
名称：“风”，
数据：[
3.
15,
21,
38
],
颜色：{
模式：{
路径：{
d:“M3 0 L 3 10 M 8 0 L 8 10”，
冲程宽度：3
},
宽度：10，
身高：10，
不透明度：1，
背景颜色：“B3FEF8”
}
}
},
{
名称：“太阳能”，
数据：[
0,
0,
2.
8.
]
},
{
名称：“生物量”，
数据：[
1.
1.
1.
1.
],
颜色：{
模式：{
路径：{
d:"M 0 L 10 M 9-1 L 11 M-1 9 L 11",，
冲程宽度：“3”
},
宽度：“10”，
高度：“10”，
不透明度：“1”，
背景色：“EAFFB2”
}
}
}
]
})

.highcharts图、.highcharts数据表{
最小宽度：310px；
最大宽度：800px；
保证金：1em自动；
}
#图表容器{
高度：400px；
保证金：自动；
}
.海图数据表{
字体系列：Roboto；
边界塌陷：塌陷；
边框：1px实心#F6F8FB；
利润率：10px自动；
文本对齐：居中；
宽度：100%；
最大宽度：500px；
}
.highcharts数据表标题{
填充：1em 0；
字体大小：1.2米；
颜色：#797D83；
}
.海图数据表th{
字号：600；
填充：0.5em0；
}
.highcharts数据表td、.highcharts数据表th、.highcharts数据表标题{
填充：0.5em0；
}
.highcharts数据表thead tr、.highcharts数据表tr:n个子项（偶数）{
背景#F6F8FB；
}
.highcharts数据表tr：悬停{
背景#F6F8FB；
}

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

您可以使用

legend.reversed

功能来实现它

演示：

API:

---

此外，我还发现，如果要保留上一个问题中的模式，可以为每个系列定义

series.index

，以决定点渲染顺序

演示：

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