2013-06-09 11 views
1

특정 조건에서 차트의 막대를 특정 색으로 채우고 있지만 막대 위에 마우스를 올려 놓으면 원래 색을 되 찾을 수 있습니다. 하이 차트에 막대의 조건부 색을 유지하는 방법

$(function() { 
     $('#container').highcharts({ 
      chart: { 
        type: 'column' 
       }, 
       title: { 
        text: 'Title', 
        style: { fontSize: '17px', color: 'Black', fontWeight: 'bold', fontfamily: 'Times New Roman' } 
       }, 
       subtitle: { 
        text: '' 
       }, 
       xAxis: { 
        categories: [ 
        'AT', 
        'KW', 
        'ND', 
        'IT' 
       ] 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Attributes Scores' 
        } 
       }, 
       tooltip: { 
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
        '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>', 
        footerFormat: '</table>', 
        shared: true, 
        useHTML: true 
       }, 
       plotOptions: { 
        column: { 
         pointPadding: 0, 
         borderWidth: 0, 
         minPointLength: -200 
        } 
       }, 
      series: [{ 
        name: 'YTD', 
        color: "#4F81BD", 
        data: [67, 66, 87, 60] 


        // data: eval('(' + seriesYTD + ')') 


       }, { 
        name: 'MAY', 
        color: "#BFBFBF", 
        data: [65, 65, 57, 70] 

       }, { 
        name: 'JUNE', 
        color: "#92D050", 
        data: [61, 77, 47, 94] 

       }], 

     exporting: { 
        enabled: false 
       } 
      }, function (chart) { 

       var ct = 0; 
       var minArray = new Array(); 



       $.each(chart.series[0].data, function (i, data) { 
        min = data.y; 

        minArray[ct] = data.y; 

        // alert(minArray[ct]); 
        ct = ct + 1; 
       }); 

       ct = 0; 

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

        // alert('1: '+ data.y + ' - 2: '+ minArray[ct]); 

        if (data.y < minArray[ct]) 
         data.graphic.attr({ 
          fill: 'red' 
         }); 
        else 
         data.graphic.attr({ 
          fill: '#92D050' 
         }); 
         ct = ct + 1; 


       }); 



      }); 
}); 

는 툴팁보기 후, 변경된 색상 즉 붉은 특정 막대에 유지되도록이 문제를 해결하는 방법을 제안하십시오이 jsfiddle

에 코드를 참조하십시오.

답변

1

포인트 옵션에 영향을주는 point.update을 사용해보세요. 포인트의 실제 상태/색상뿐만 아니라 http://jsfiddle.net/NWmKL/3/

관련 문제