Используя данные json, обновите данные своей серии как
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive:true, //attribute for legend, true means click will work
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive:false,
}, {
name: 'Firefox',
y: 10.38,
legendActive:false,
}, {
name: 'Safari',
y: 4.77,
legendActive:false,
}, {
name: 'Opera',
y: 0.91,
legendActive:false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive:false,
}]
Используйте функцию для легенды: нажмите
point: {
events: {
legendItemClick: function() {
return this.legendActive; //this is property from series data
}
}
}
$(document).ready(function() {
// Build the chart
$('#container').highcharts({
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: false
},
showInLegend: true,
point: {
events: {
legendItemClick: function() {
return this.legendActive;
}
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
legendActive: true,
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true,
legendActive: false,
}, {
name: 'Firefox',
y: 10.38,
legendActive: false,
}, {
name: 'Safari',
y: 4.77,
legendActive: false,
}, {
name: 'Opera',
y: 0.91,
legendActive: false,
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
legendActive: false,
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>