Highcharts當我點擊此部分時的部分餡餅顏色

我如何修改此代碼http://jsfiddle.net/r6p7E/6/以查看每次我選擇時使用相同顏色選擇的部分？只有當我點擊這個時，我纔想讓它變成黃色。Highcharts當我點擊此部分時的部分餡餅顏色

代碼：

$(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(); 
     } 



     ); 
    });

來源

2013-08-22 OOOO

你是說你不想要的顏色變化，當你徘徊，只有你希望它在點擊時改變？另外，當你點擊時你是否想要所有的作品都是相同的顏色（黃色），還是你希望每個作品都是自己的顏色？ –

我希望我點擊的部分是黃色的，而其他人不會改變。 – OOOO

這可能是你真正想要的。但基於你問這個小提琴爲您提供了：http://jsfiddle.net/r6p7E/8/

代替鼠標懸停事件，您可以更改到一個click事件：

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

當然mouseout事件殺死了顏色，一旦你離開，但我不確定這是否是你的願望或不是你沒有提及它。

編輯：這撥弄保留了黃顏色，直到它處於未選中狀態（或其他被選中）：http://jsfiddle.net/r6p7E/12/

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

來源

2013-08-22 20:31:41

即使鼠標光標未覆蓋，我也想保留顏色。 – OOOO

謝謝！像這樣的http://jsfiddle.net/r6p7E/9/必須是。 – OOOO

slicedOffset：0 - 保持餡餅切片不會滑出 –

看到這個小提琴：http://jsfiddle.net/L5SXX/

您需要打開allowPointSelect，然後添加顏色選擇狀態。因爲你在做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' 
          }); 
         } 
        }); 
       } 
      } 
     } 
    },

來源

2013-08-22 20:25:09

感謝您的建議，但我如何保持選定的顏色？ – OOOO

此代碼在鼠標移出後將其返回至所選顏色。你想讓鼠標變成黃色嗎？如果是這樣，請將一個if（！this.selected）添加到mouseOver代碼中，以不更改所選片段的顏色。 –

Highcharts當我點擊此部分時的部分餡餅顏色

回答

相關問題