ハイチャートは、テキストがデータポイントの外側にあるかどうかを判断します。

Question

バーの内側または外側にあるデータポイントを区別する方法があるかどうかは疑問です。基本的には

、私は（それがバーの内側だから）テキスト9178は、私が生成する色になりたい

• 以下のチャート
• と私は数字の残りの部分は黒になりたい（なぜなら彼らは棒の外にあります）

私はAPIがプログラムでどの色を使うかを決めることができるのかどうか疑問に思っています。例： 私が呼び出すことができるメソッドisOverflow（）がデータポイントにある場合、trueを返すと、色を黒に設定できます。

jsfiddleに作成

：https://jsfiddle.net/Mingzilla/pjqhqn4u/6

var generateColor = function(item) { 
    var lightColor = "#DADADA"; 
    var color = new Highcharts.Color(item.point.color).rgba; 
    var isLightBg = color[0] + color[1] + color[2] > 384; 
    return isLightBg ? '#000000' : lightColor; 
}; 


$(function() { 
    $('#container').highcharts({ 
    title: { 
     text: 'I want data point inside a bar to be my colour, and outside to be black' 
    }, 
    chart: { 
     type: 'column' 
    }, 
    xAxis: { 
     categories: ['Car Insurance', 
     'Life Insurance', 
     'Pet Insurance' 
     ] 
    }, 
    plotOptions: { 
     series: { 
     dataLabels: { 
      enabled: true, 
      overflow: 'justify', 
      style: { 
      fontWeight: 'normal', 
      textShadow: 'none' 
      }, 
      formatter: function() { 
      var item = this; 
      return '<span style="fill:' + 
       generateColor(item) + '">' + 
       (item.point.formattedValue || item.point.y) + 
       '</span>'; 
      } 
     } 
     } 
    }, 

    series: [{ 
     "color": "#666699", 
     "name": "North", 
     "data": [{ 
     "color": "#666699", 
     "name": "Car Insurance", 
     "y": 9178 
     }, { 
     "color": "#666699", 
     "name": "Life Insurance", 
     "y": 4518 
     }, { 
     "color": "#666699", 
     "name": "Pet Insurance", 
     "y": 1450 
     }] 
    }, { 
     "color": "#663366", 
     "name": "South", 
     "data": [{ 
     "color": "#663366", 
     "name": "Car Insurance", 
     "y": 2129 
     }, { 
     "color": "#663366", 
     "name": "Life Insurance", 
     "y": 1066 
     }, { 
     "color": "#663366", 
     "name": "Pet Insurance", 
     "y": 374 
     }] 
    }] 

    }); 
}); 

Answer 1

Defaulty色、コントラストまたは宣言単一の色に基づいています。しかし、すべてのデータラベルに対して色（つまり黒）を返すことができます。その後、チャートオブジェクト内のロード/再描画イベントをキャッチして、すべてのデータラベルを処理します。それぞれの内部には、positionとverticalAlignの情報があり、ラベルの場所を確認するために使用できます。これがトップの場合、css（）メソッドでlightColorを適用してください。

var lightColor = "#DADADA"; 

function datalabelColor() { 
    var chart = this, 
    series = chart.series, 
    each = Highcharts.each, 
    dL; 

    each(series, function(serie, i) { 
    each(serie.data, function(p, j) { 
     dL = p.dataLabel; 

     if(dL.alignOptions.verticalAlign === 'top') { 
     dL.css({ 
      color: lightColor 
     }); 
     } 
    }); 
    }); 
} 

例： - https://jsfiddle.net/mys5k9ty/

は、ご不明な点がありましたら、私に教えてください。