如何制作图例标签以显示饼图的系列,并且在 HighCharts 中单击标签时不让它们消失?
How to make legend labels to bring out the series of a pie chart and not make them disappear when label is clicked in HighCharts?
我用 HighCharts 制作了以下图表 http://jsfiddle.net/dbahiense/enmqyv0p/。
这里是js代码:
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
useHTML: true,
verticalAlign: 'middle',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
useHTML: true,
verticalAlign: 'middle',
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
当我直接点击图表上的任何系列或它的标签时(通过彩色细线连接到图表)馅饼的相应部分移出,当我再次单击它时,它会移入。在另一侧,当我单击 图例 时,馅饼的相应系列 disappears/appears .我知道这是我们应该期待的。
我真正想知道的是我必须做什么,所以当我点击图例的标签之一(左侧的浏览器列表)时,它并没有消失,而是移开了。
我已经尝试 change/insert legend.enable、plotOptions.pie.dataLabels、pie.selecte、pie.showInLegend 和选项但没有成功。
非常感谢!
您可以覆盖饼图点级别的图例项单击事件。 http://api.highcharts.com/highcharts#plotOptions.pie.point.events.legendItemClick
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
point: {
events: {
legendItemClick: function (event) {
event.preventDefault();
this.select();
}
}
}
}
}
在这里我阻止了默认值的发生并触发了点 select 事件。
http://jsfiddle.net/blaird/enmqyv0p/4/
我用 HighCharts 制作了以下图表 http://jsfiddle.net/dbahiense/enmqyv0p/。
这里是js代码:
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
useHTML: true,
verticalAlign: 'middle',
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
useHTML: true,
verticalAlign: 'middle',
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
当我直接点击图表上的任何系列或它的标签时(通过彩色细线连接到图表)馅饼的相应部分移出,当我再次单击它时,它会移入。在另一侧,当我单击 图例 时,馅饼的相应系列 disappears/appears .我知道这是我们应该期待的。
我真正想知道的是我必须做什么,所以当我点击图例的标签之一(左侧的浏览器列表)时,它并没有消失,而是移开了。
我已经尝试 change/insert legend.enable、plotOptions.pie.dataLabels、pie.selecte、pie.showInLegend 和选项但没有成功。
非常感谢!
您可以覆盖饼图点级别的图例项单击事件。 http://api.highcharts.com/highcharts#plotOptions.pie.point.events.legendItemClick
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
point: {
events: {
legendItemClick: function (event) {
event.preventDefault();
this.select();
}
}
}
}
}
在这里我阻止了默认值的发生并触发了点 select 事件。
http://jsfiddle.net/blaird/enmqyv0p/4/