自定义散点图的光晕,使中心明确地着色

时间:2017-02-23 16:55:14

标签: highcharts

这就是我所说的光环: http://api.highcharts.com/highcharts/plotOptions.area.states.hover.halo

似乎“填充”,“填充颜色”和“颜色”在“属性”中或不在“属性”中都不起作用。

正如你从这个jsfiddle中看到的那样:jsfiddle.net/s7ff806c/1光环是一个可以看透的空心圆圈。我希望圆圈是坚固的(即无法透视)。

1 个答案:

答案 0 :(得分:0)

我认为明显的颜色意味着完全不透明,请参见here如何实现

每个系列中的

给出color: 'rgba(223, 83, 83, 1.0)', 1.0表示完全不透明,采用rgba格式

series: [{
name: 'Female',
color: 'rgba(223, 83, 83, 1.0)',
data: [
  [161.2, 51.6],....]
  }, {
name: 'Male',
color: 'rgba(119, 152, 191, 1.0)',
data: [
  [174.0, 65.6],...]}
]
自定义halo

Fiddle link

更新

可以调整光环不透明度,参见高图文档

中的Opacity

Fiddle Demo将不透明度调整为完整

  plotOptions: {
    series: {
        states: {
            hover: {
                halo: {
                    size: 9,
                   opacity:1,
                    attributes: {
                        fill: Highcharts.getOptions().colors[2],
                        'stroke-width': 2,
                        stroke: Highcharts.getOptions().colors[1]
                    }
                }

            }
        }
    }
},

更新 - > 设置笔画的不透明度,与填充的不透明度无关

在属性

中提供'stroke-opacity': .5,

Fiddle link

plotOptions: {
series: {
  states: {
    hover: {
      halo: {
        size: 9,
        opacity: 1,
        attributes: {
          fill: Highcharts.getOptions().colors[2],
          'stroke-width': 5,
          'stroke-opacity': .5,
          stroke: Highcharts.getOptions().colors[1]
        }
      }

    }
  }
 }
},