单击图例中的项目时如何禁用 ZingChart 中消失的条形图
How to disable bar disappearing in ZingChart when clicking an item in the legend
在 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>
在 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>