부품을 하이 컬러로 표시 할 때이 부품을 클릭했을 때

Question

http://jsfiddle.net/r6p7E/6/을 선택하면 선택할 때마다 같은 색상으로 선택된 섹션이 표시됩니다. 나는 이것을 클릭 할 때만 노란색으로하고 싶다.

코드 : http://jsfiddle.net/L5SXX/

당신은 allowPointSelect 켜고 다음 선택 상태에 대한 색상을 추가해야

$(function() { 

      Highcharts.theme = { 
      colors: ['#242c4a'], 
      chart: { 
      width: 350, 
       backgroundColor: { 
        linearGradient: [0, 0, 500, 500], 
        stops: [ 
         [0, 'rgb(255, 255, 255)'], 
         [1, 'rgb(240, 240, 255)'] 
        ] 
       }, 
      }, 

     }; 

     // Apply the theme 
     Highcharts.setOptions(Highcharts.theme); 

     // Build the chart 
     $('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Our Projects' 
      }, 

      plotOptions: { 

       pie: { 


        borderColor: '#48588c', 
        borderWidth: 7, 
        slicedOffset: 10,      
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 

        } 

       }, 

       series: { 

       point: { 
        events: { 
         select: function() { 

         } 
        } 
       } 
      } 


      }, 
       series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       dashStyle: 'LongDashDotDot', 
       data: [ 
        ['Firefox', 45.0], 
        ['IE',  26.8], 
        { 
         name: 'Chrome', 
         y: 12.8, 
         sliced: true, 
         selected: true 
        }, 
        ['Safari', 8.5], 
        ['Opera',  6.2], 
        ['Others', 0.7] 
       ] 
      }] 
     }, 

     function(chart) { // on complete 


     var renderer = new Highcharts.Renderer(
      $('#container')[0], 50, 50); 

     chart.renderer.circle(175, 216, 22).attr({ 
      fill: '#e7e620', 

      'stroke-width': 5, 
      zIndex: 3 
     }).add(); 
     } 



     ); 
    }); 

Answer 1

실제로 원하는 것일 수 있습니다. 그러나이 바이올린을 요청 내용에 따라 그 당신에게 제공 : 물론

point: { 
    events: { 
     click: function() { 
      this.graphic.attr({ 
       fill: 'yellow' 
      }); 
     } 
    } 
}, 

가 mouseOut 이벤트는 일단 색상을 죽이고 : http://jsfiddle.net/r6p7E/8/가 대신 mouseOver 이벤트의

, 당신은 클릭 이벤트에 그것을 변경할 수 있습니다 멀리 이동하지만 당신이 그것을 언급하지 않았 으면 그것이 당신이 원하거나 그렇지 않은지 확실하지 않습니다.

편집 :이 바이올린은 선택되지 않은 때까지 노란색의 색상을 유지 (또는 다른 선택됩니다) : http://jsfiddle.net/r6p7E/12/

allowPointSelect: true, 
slicedOffset: 0, 
point: { 
    events: { 
     select: function() { 
      this.update({color: 'yellow'}); 
     }, 
     unselect: function() { 
      this.update({color: '#CCCCCC'}); 
     } 
    } 
} 

Answer 2

이 바이올린을 참조하십시오. mouseOver 및 mouseOut 작업을 수행하기 때문에 선택한 색상을 유지하려면 약간의 수정이 필요합니다.

plotOptions: { 

     series: { 
      allowPointSelect : true, 
      slicedOffset: 0, 
      states: { 
       select: { 
        color: 'yellow' 
       }, 
       hover: { 
        enabled: false 
       } 
      }, 
      point: { 
       events: { 
        mouseOver: function() { 
         this.graphic.attr({ 
          fill: 'red' 
         }); 
        } 
       } 
      }, 
      events: { 
       mouseOut: function() { 
        var serie = this.points; 

        $.each(serie, function (i, e) { 
         if (!this.selected) {          
          this.graphic.attr({ 
           fill: '#CCCCCC' 
          }); 
         } 
         else { 
          this.graphic.attr({ 
           fill: 'yellow' 
          }); 
         } 
        }); 
       } 
      } 
     } 
    },