値に応じてドリルダウンで列に異なる値を与える方法

Question

ドリルダウンハイチャートで列を使用しました。 は、ここに特定の列をクリックした後、私は、これは完全に正常に動作します。この

を取得しています。私が欲しいのは、値が8.00の列をいくつかの異なる色（例えば緑色）にすることです。どのようにしてそれを可能にすることができますか？

series: [{ 
         name: 'Attendance', 
         colorByPoint: true, 
         data: [{ 
          name: 'Jan', 
          y: Attendances.data.YearlyReport[0], 
          drilldown: 'Jan', 
         }, { 
          name: 'Feb', 
          y: Attendances.data.YearlyReport[1], 
          drilldown: 'Feb' 
         }, { 
          name: 'March', 
          y: Attendances.data.YearlyReport[2], 
          drilldown: 'March' 
         }, { 
          name: 'April', 
          y: Attendances.data.YearlyReport[3], 
          drilldown: 'April' 
         }, { 
          name: 'May', 
          y: Attendances.data.YearlyReport[4], 
          drilldown: 'May' 
         }, { 
          name: 'June', 
          y: Attendances.data.YearlyReport[5], 
          drilldown: 'June' 
         }, { 
          name: 'July', 
          y: Attendances.data.YearlyReport[6], 
          drilldown: 'July' 
         }, { 
          name: 'Aug', 
          y: Attendances.data.YearlyReport[7], 
          drilldown: 'Aug' 
         }, { 
          name: 'Sep', 
          y: Attendances.data.YearlyReport[8], 
          drilldown: 'Sep' 
         }, { 
          name: 'Oct', 
          y: Attendances.data.YearlyReport[9], 
          drilldown: 'Oct' 
         }, { 
          name: 'Nov', 
          y: Attendances.data.YearlyReport[10], 
          drilldown: 'Nov' 
         }, { 
          name: 'Dec', 
          y: Attendances.data.YearlyReport[11], 
          drilldown: 'Dec' 
         }] 
        }], 
    drilldown: { 
         series: 
          [{ 
          name: 'Jan', 
          id: 'Jan', 
          data: [ 
           [ 
            '1', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1]) 

           ], 
           [ 
            '2', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2]) 
           ], 
           [ 
            '3', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3]) 
           ], 
           [ 
            '4', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4]) 
           ], 
           [ 
            '5', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5]), 


           ], 
           [ 
            '6', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6]) 
           ], 
           [ 
            '7', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7]) 
           ], 
           [ 
            '8', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8]) 
           ], 
           [ 
            '9', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9]) 
           ], 
           [ 
            '10', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10]) 
           ], 
           [ 
            '11', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11]) 
           ], 
           [ 
            '12', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12]) 
           ], 
           [ 
            '13', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13]) 
           ], 
           [ 
            '14', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14]) 
           ], 
           [ 
            '15', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15]) 
           ], 
           [ 
            '16', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16]) 
           ], 
           [ 
            '17', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17]) 
           ], 
           [ 
            '18', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18]) 
           ], 
           [ 
            '19', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19]) 
           ], 
           [ 
            '20', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20]) 
           ], 
           [ 
            '21', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21]) 
           ], 
           [ 
            '22', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22]) 
           ], 
           [ 
            '23', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23]) 
           ], 
           [ 
            '24', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24]) 
           ], 
           [ 
            '25', 
             parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25]) 
           ], 
           [ 
            '26', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26]) 
           ], 
           [ 
            '27', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27]) 
           ], 
           [ 
            '28', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28]) 
           ], 
           [ 
            '29', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29]) 
           ], 
           [ 
            '30', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30]) 
           ], 
           [ 
            '31', 
            parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31]) 
           ] 
          ]}, 
          { 
          name: 'Feb', 
          id: 'Feb', 
          data: [ 
            .... 

Answer 1

check fiddle link

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 

JS

$(function() { 
// Create the chart 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: { 
     title: { 
      text: 'Total percent market share' 
     } 

    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      } 
     } 
    }, 

    tooltip: { 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
    }, 

    series: [{ 
     name: 'Brands', 

     data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33, 
      drilldown: 'Microsoft Internet Explorer' 
     }, { 
      name: 'Chrome', 
      y: 24.03, 

      drilldown: 'Chrome' 
     }, { 
      name: 'Firefox', 
      y: 8.00, 
      drilldown: 'Firefox' 
     }, { 
      name: 'Safari', 
      y: 4.77, 
      drilldown: 'Safari' 
     }, { 
      name: 'Opera', 
      y: 0.91, 
      drilldown: 'Opera' 
     }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2, 
      drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      data: [ 
       [ 
        'v11.0', 
        24.13 
       ], 
       [ 
        'v8.0', 
        17.2 
       ], 
       [ 
        'v9.0', 
        8.11 
       ], 
       [ 
        'v10.0', 
        5.33 
       ], 
       [ 
        'v6.0', 
        1.06 
       ], 
       [ 
        'v7.0', 
        0.5 
       ] 
      ] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       [ 
        'v40.0', 
        5 
       ], 
       [ 
        'v41.0', 
        4.32 
       ], 
       [ 
        'v42.0', 
        3.68 
       ], 
       [ 
        'v39.0', 
        2.96 
       ], 
       [ 
        'v36.0', 
        2.53 
       ], 
       [ 
        'v43.0', 
        1.45 
       ], 
       [ 
        'v31.0', 
        1.24 
       ], 
       [ 
        'v35.0', 
        0.85 
       ], 
       [ 
        'v38.0', 
        0.6 
       ], 
       [ 
        'v32.0', 
        0.55 
       ], 
       [ 
        'v37.0', 
        0.38 
       ], 
       [ 
        'v33.0', 
        0.19 
       ], 
       [ 
        'v34.0', 
        0.14 
       ], 
       [ 
        'v30.0', 
        0.14 
       ] 
      ] 
     }, { 
      name: 'Firefox', 
      id: 'Firefox', 
      data: [ 
       [ 
        'v35', 
        2.76 
       ], 
       [ 
        'v36', 
        2.32 
       ], 
       [ 
        'v37', 
        2.31 
       ], 
       [ 
        'v34', 
        1.27 
       ], 
       [ 
        'v38', 
        1.02 
       ], 
       [ 
        'v31', 
        0.33 
       ], 
       [ 
        'v33', 
        0.22 
       ], 
       [ 
        'v32', 
        0.15 
       ] 
      ] 
     }, { 
      name: 'Safari', 
      id: 'Safari', 
      data: [ 
       [ 
        'v8.0', 
        2.56 
       ], 
       [ 
        'v7.1', 
        0.77 
       ], 
       [ 
        'v5.1', 
        0.42 
       ], 
       [ 
        'v5.0', 
        0.3 
       ], 
       [ 
        'v6.1', 
        0.29 
       ], 
       [ 
        'v7.0', 
        0.26 
       ], 
       [ 
        'v6.2', 
        0.17 
       ] 
      ] 
     }, { 
      name: 'Opera', 
      id: 'Opera', 
      data: [ 
       [ 
        'v12.x', 
        0.34 
       ], 
       [ 
        'v28', 
        0.24 
       ], 
       [ 
        'v27', 
        0.17 
       ], 
       [ 
        'v29', 
        0.16 
       ] 
      ] 
     }] 
    } 
}, 
function(chart){ 

     var max = 10; 

     $.each(chart.series[0].data,function(i,data){ 

      if(data.y ==8.00) 
       data.graphic.attr({ 
        fill:'red' 
       }); 

     }); 

    }); 

}）。