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当我点击此部分时的部分馅饼颜色

回答

相关问题