Question

我正在搞乱高图，并想知道是否有可能在悬停时增加饼图的大小？我尝试过这样的事情：

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        size: 100,
        showInLegend: true,
        dataLabels: {
            enabled: false
        },
        hover: {
            pie: {
                size:200
            },
        },
    }
},

Answer 1

通过更新

可以实现所需的效果

plotOptions: {
    pie: {
      ........
      states: {
        hover: {
          brightness: 0,
          halo: {
            opacity: 1
          }
        }
      }
    }
  },

参考plotOptions.pie.states.hover

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares January, 2015 to May, 2015'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      },
      states: {
        hover: {
          brightness: 0,
          halo: {
            opacity: 1
          }
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    borderWidth: 2,
    borderColor: null,
    data: [{
      name: 'IE',
      y: 56.33
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true
    }, {
      name: 'Firefox',
      y: 10.38
    }, {
      name: 'Safari',
      y: 4.77
    }, {
      name: 'Opera',
      y: 0.91
    }, {
      name: 'Other',
      y: 0.2
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 2

您可以在size / mouseOver个事件中更新饼图系列的mouseOut以获得所需的结果：

events: {
  mouseOver: function() {
    this.update({
      size: 300
    });
  },
  mouseOut: function() {
    this.update({
      size: 200
    });
  },
}

现场演示： http://jsfiddle.net/kkulig/vhh95L3d/

API参考： https://api.highcharts.com/class-reference/Highcharts.Series#update

Answer 3

使用CSS在悬停时调整单个切片的大小：

.highcharts-pie-series .highcharts-point-hover,
.highcharts-pie-series:hover .highcharts-halo {
    transform-origin: (chart center coordinates);
    transform: scale(1.2, 1.2);
}

https://jsfiddle.net/k8wkt4dL/

使用highcharts增加饼图大小？

3 个答案: