高图表图例符号未显示，对于全息列

Question

我想使用 HighChart 显示条形图(柱形图(，但条形图应显示全息柱(带边框的透明柱(。为此，我设置color和borderColor如下

    plotOptions: {
    series: {
        color: Highcharts.Color('#000000').setOpacity(0).get('rgba'),//'#000000'
        borderColor: '#000000'
    }
},

但它没有在图例中显示系列符号，如此 JSFiddle 所示。无论如何，是否可以在图例中显示系列符号，保持列(条(显示为全息(透明，边框可见(。

Answer 1

我正在使用来自 Style by CSS 的想法来自 highcharts 来自定义标签

小提琴链接

.css

.highcharts-legend-item * { /*for default case*/
  fill: black !important;
}
.highcharts-legend-item-hidden * { /*when clicked*/
  fill: gray !important;
}

Answer 2

图例符号未显示，因为它的颜色不透明度为 0，与系列相同。找不到任何可以让您设置标记颜色的东西，但我有一个解决方法。您可以使用符号格式化图例标签，在这里您可以找到其中一些符号 http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm

这是隐藏图

例符号并设置其标签格式的代码。

legend: {
        symbolPadding: 0,
        symbolWidth: 0.001,
        symbolHeight: 0.001,
        symbolRadius: 0,
        labelFormatter: function () {
             return "◼ " + this.name;
    }
},

完整的小提琴在这里 http://jsfiddle.net/hfuuocdw/2/

Answer 3

我通过设置每个系列的颜色和边框颜色来修复它，然后添加一个 css 样式以使"填充"透明，如本小提琴所示。

.highcharts-series-group .highcharts-point {
  fill: rgba(0,0,0,0)
}