スタイルモードでhighcharts-haloのカスタム色を設定する

Question

StyledモードでHighcharts 6.0.1を使用していて、特定のポイントと対応するハローのカスタムカラーを設定しようとしています。

私は、シリーズ内のいくつかのポイントにクラス名を動的に追加できる必要があります。これらの点は別の色で表示する必要があるため、デフォルトの系列色（.highcharts-color-i）を上書きする必要があります。

pointオブジェクトでオプションのclassNameを受け入れることができるため、特定のポイントの色をオーバーライドすることができました。これを円グラフのスライスの色にスタイル設定することができます。

ハローのCSSルールは、対応する.highcharts-color-iの色を継承するように設定されています。ポイントの子要素ではないため、カスタムクラス名を継承することはできません。ここで

は、コードスニペットです。灰色のスライスの上にマウスを置くと、ハローがデフォルトの色を使用していることがわかります。

Highcharts.chart('container', { 
 
    title: { 
 
     text: 'Pie point CSS' 
 
    }, 
 
    tooltip: { 
 
    pointFormat: '<b>{point.percentage:.1f}%</b>' 
 
    }, 
 
    series: [{ 
 
     type: 'pie', 
 
     keys: ['name', 'y', 'className'], 
 
     data: [ 
 
      ['Point1', 29.9,], 
 
      ['Point2', 14.5], 
 
      ['Point3', 11.5], 
 
      ['Point4', 54.5, 'custom-style'], 
 
     ], 
 
    }] 
 
});

@import 'https://code.highcharts.com/css/highcharts.css'; 
 

 
#container { 
 
\t height: 400px; 
 
\t max-width: 800px; 
 
\t min-width: 320px; 
 
\t margin: 0 auto; 
 
} 
 
.highcharts-tooltip { 
 
    stroke: gray; 
 
} 
 
.highcharts-pie-series .highcharts-point { 
 
\t stroke: #EDE; 
 
\t stroke-width: 2px; 
 
} 
 
.highcharts-pie-series .highcharts-data-label-connector { 
 
\t stroke: silver; 
 
\t stroke-dasharray: 2, 2; 
 
\t stroke-width: 2px; 
 
} 
 

 
.highcharts-pie-series .highcharts-point.custom-style, 
 
.highcharts-pie-series .highcharts-data-label-connector.custom-style { 
 
\t stroke: lightgray; 
 
\t stroke-dasharray: white; 
 
\t stroke-width: 1px; 
 
    fill:lightgray; 
 
}

<script src="https://code.highcharts.com/js/highcharts.js"></script> 
 
<div id="container"></div>

Answer 1

ハロシリーズ（ない点 - ハロシリーズごとに存在することができる唯一のもの）の特性です。 DOMツリーでは、残りのポイントと同じレベルにあります。

あなたはハローの色を設定するためのポイントのmouseOverイベントを使用することができます。

plotOptions: { 
    series: { 
     point: { 
     events: { 
      mouseOver: function() { 
      var point = this, 
       className = point.className; 
      if (className) { 
       point.series.halo.attr({ 
       class: 'highcharts-halo custom-style' 
       }); 
      } 
      } 
     } 
     } 
    } 
    } 

.highcharts-halo.custom-styleセレクタはCSSを経由してスタイリングのために使用されています。

---

ライブデモ：http://jsfiddle.net/kkulig/fv0zen7L/

APIリファレンス：あなたが使用できる

• https://api.highcharts.com/highcharts/plotOptions.pie.events.mouseOver
• https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr