Question

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

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

但它没有在图例中显示系列符号，如this jsFiddle所示。无论如何在Legends中显示系列符号，保持列（条）显示为holo（透明且带有可见边框）。

Answer 1

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

Fiddle link

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样式为透明，如1小提琴所示。

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

对于全息列，高图传奇符号没有出现

3 个答案: