如何改变高图表上没有悬空的列的不透明度？

Question

这有可能在不改变默认不透明度的情况下，改变高图表中无悬停点的opacity吗？

默认情况下，对于所有列，我都有带有opacity: 1的列图表。但是，当用户悬停列时，我想用opacity: 0.3设置所有列，但悬停的列除外，如下例所示：

在任何列中无悬停的图表：

​

​

悬停图：

​

​

以下是代码：

Html：

​

    this.graphic = Highcharts.chart('graph-roa', {
      chart: {
        zoomType: 'xy',
        marginTop: 20
      },
      title: {
        text: undefined
      },
      credits: {
        text: '',
        href: ''
      },
      xAxis: [{
        categories: ['13/07','14/07','15/07','16/07','17/07','20/07', '21/07']
      }],
      yAxis: [
        {
          lineWidth: 1,
          gridLineWidth: 0,
          labels: {
            formatter() {
              return this.value;
            },
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          title: {
            align: 'high',
            offset: 3,
            text: 'Reais',
            rotation: 0,
            y: -10
          }
        },
        {
          title: {
            text: ''
          },
          labels: {
            format: '',
            style: {
              color: '#fff'
            }
          },
          opposite: true
        }
      ],
      tooltip: {
        shared: true,       
      },
      legend: {
        layout: 'vertical',
        align: 'left',
        x: 700,
        verticalAlign: 'top',
        y: 10,
        floating: true,
        backgroundColor: ('#000' && '#fff') || 'rgba(255,255,255,0.25)'
      },
      series: [{
        name: 'Valor',
        type: 'column',
        color: '#106D98',
        data: [20,60,40,100,20,20,20],
        cursor: 'pointer',        
      }]
    });

.graph {
  // width: auto;
  height: 180px;
  display: block;
  margin-top: 20px;
}

.demais-dados-roa {
  font-family: $tt-norms-regular;
  font-size: 14px;
  margin-bottom: 2em;
  .label {
    color: $sec-5;
  }

<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="row demais-dados-roa justify-content-between atual no-gutters">
    <div class="col-auto">
        <h3 class="graphic-title">
          Repasse Esc.
        </h3>
        <em class="fas fa-info-circle" (click)="tooltipVisible = true"></em>
    </div>
    <div class="col-auto">
      <div class="row no-gutters">
        <h3 class="graphic-title ml-auto">
          1,50k
        </h3>
      </div>
      <div class="row no-gutters">
        <p class="label">
          Acum. Julho
        </p>
      </div>
    </div>
</div>
<div id="graph-roa" class="graph"></div>

​

Answer 1

您可以通过使用mouseOver和mouseOut回调来改变点的不透明度来实现这一点。

演示：https://jsfiddle.net/BlackLabel/1srupnxk/

point: {
  events: {
    mouseOver() {
      let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 0.3
        })
      })

      this.graphic.css({
        opacity: 1
      })
    },
    mouseOut() {
                let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 1
        })
      })
    }
  }
},

API：https://api.highcharts.com/highcharts/series.column.point.events.mouseOver

Answer 2

这是密码。

这样做的目的是：

1. .outer:hover > * { opacity: 0.4; }这里所有的红色物品在悬停时都会稍微褪色。
2. Now .outer:hover > *:hover将对当前的项目进行样式设置。

​

.outer {
    display: inline-block;
}

.inner {
  height: 100px;
  width: 20px;
  background: red;
  display: inline-block;
  margin-right: 10px;
}

.outer:hover > * {
  opacity: 0.4;
}

.outer:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;
}

<div class="outer">

  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>

</div>

​