как изменить цвет среза в диаграмме пончика на Щелчке среза?

можно ли изменить цвет среза диаграммы пончика при нажатии пользователем .Я хочу, чтобы серый из всех срезов, кроме выбранного ..можем мы серый цвет вне все ломтики когда потребитель
нажмите / выберите любой срез ..
Иначе говоря

У меня есть четыре цвета синий ,черный , зеленый, оранжевый ..Когда я нажимаю на синий, он показывает, что синий отдых серый ..когда я клсик на черном показываю черные остальные серые .вот мой код

http://jsfiddle.net/nyhmdtb8/5/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      labelFormatter: function() {

        return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
            plotOptions: {
          pie: {

                  showInLegend: true,
                         dataLabels: {
                        format: '<b>{point.y}</b>',

                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        }
                    },
            point: {
                events: {
                    legendItemClick: function (e) {
                    return false;
                  },
                  click:function(e){
                  console.log(this.points)
                   console.log(e);
                    this.graphic.attr({
                fill: 'yellow'
            });
                  //return false;
                  }
                }
              },
                   startAngle: 0,
                  endAngle: 270,
            }
            },
    tooltip: {
      enabled: false,
      shadow: false
    },
    series: [{
      states: {
        hover: {
          enabled: false
        }
      },
      showInLegend: false,
      name: 'election result',
      enabled: true,
      dataLabels: {
        enabled: true
      },
      data: [
        ['A', 55],
        ['B', 65],

      ],
      size: '30%',
      innerSize: '70%',
    }, {
      states: {
        hover: {
          enabled: false
        }
      },
      name: 'Versions',
      data: [
        ['sdsd', 55],
        ['sdf', 65],
        ['sdf', 65],
        ['sdf', 132],

      ],
      size: '70%',
      innerSize: '80%',

    }]
  });
});

1 ответ

  1. Вы должны петля через ряд и через точки и изменить его цвет с точкой.update (). Если вы используетеpoint.graphic.attr(fill: 'grey'), то элементы svg и объекты js не будут синхронизированы.

    При загрузке событий сохраните исходный цвет для срезов:

    chart: {
      type: 'pie',
      events: {
        load: function () {
          this.series.forEach(series => {
            series.points.forEach(point => {
              point.options.origColor = point.color;
            });
          });
        }
      }
    },
    

    При щелчке измените цвет в соответствии с выбранной точкой.

    click: function(e) {
              console.log(this)
              console.log(e);
    
              this.series.chart.series.forEach(series => {
                series.points.forEach(point => {
                  point.update({
                    color: this !== point ? 'grey' : point.options.origColor
                  }, false, false);
                });
              })
              this.series.chart.redraw();
            }
    

    И последнее, измените форматер легенды, если вы хотите, чтобы его цвет не менялся

     labelFormatter: function() {
    
        return '<div style="padding:5px;width:55px;background-color:' + (this.options.origColor || this.color) + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    

    пример: http://jsfiddle.net/zwawuem9/

    пример изменения цвета легенды: http://jsfiddle.net/zwawuem9/1/