如何禁用条形图中消失时，点击一个项目的图例

How to disable bar disappearing in ZingChart when clicking an item in the legend

本文关键字：一个 项目 条形图 何禁用 消失      更新时间：2023-09-26

在ZingChart中，当单击图例项时，默认功能是隐藏与图例中该项值相关的所有相应的条形图系列。

我正在执行一个钻取操作，这是从服务器获取数据的图形，同时单击图例项，然后用它绘制一个新的图表。现在我不希望这些条消失，而单击图例项目，同时想要执行onclick事件时，选择图例。

当我在图例中添加:"toggle-action":"disabled"时，条形图的消失不会发生，onclick事件也不会发生。

下面是我写的图例项点击功能:

zingchart.bind("hbarChart", "legend_item_click", function (p) {
    var data= p.xdata.band[0];
    getData(data);
});

我认为你只需要将toggleAction: disabled改为none。

var myConfig = {
 	type: 'bar', 
 	legend: {
 	  toggleAction:'none'
 	},
	series: [
		{
			values: [35,42,67,89]
		},
		{
			values: [25,34,67,85]
		}
	]
};
function legendClickHandler(){
  console.log('test worked!');
}
zingchart.bind('myChart', 'legend_item_click', legendClickHandler );
zingchart.bind('myChart', 'legend_marker_click', legendClickHandler );
zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

相关文章：