2016-11-09 5 views
2

凡例のZingChartのデフォルト機能は、その項目の値に関連するすべての棒グラフを凡例に隠すことです。凡例の項目をクリックしたときにZingChartの棒が消える方法を無効にする方法

凡例項目をクリックして新しいグラフを描画しながら、サーバーからグラフのデータを取得しているドリルダウン操作を実行しています。今は、凡例をクリックしている間にこれらのバーが消えないようにしてください。また、凡例を選択するときにonclickイベントを実行したいと思っています。

私は追加

"toggle-action":"disabled"伝説の内側には、バーのdisappearenceはそれほどのonclickイベントを行います発生しません。続き

は、私が書かれている凡例項目のクリック機能である:

zingchart.bind("hbarChart", "legend_item_click", function (p) { 

    var data= p.xdata.band[0]; 
    getData(data); 
}); 

答えて

2

私はあなただけnonetoggleAction:disabledを変更する必要があると思います。

var myConfig = { 
 
    \t type: 'bar', 
 
    \t legend: { 
 
    \t toggleAction:'none' 
 
    \t }, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [35,42,67,89] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [25,34,67,85] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
function legendClickHandler(){ 
 
    console.log('test worked!'); 
 
} 
 

 
zingchart.bind('myChart', 'legend_item_click', legendClickHandler); 
 
zingchart.bind('myChart', 'legend_marker_click', legendClickHandler); 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"></div> 
 
\t </body> 
 
</html>

+0

おかげで、私はそれぞれのシリーズがhiglightedしなければならない凡例の項目にカーソルを合わせると、すなわち表示されるホバー機能を作るための方法は、(この機能はデフォルトの機能である。そこではなくなります「無効」または「なし」のいずれかで「アクショントグル」を指定すると無効になります – user5210703

+0

[legend guide](https://www.zingchart.com/docs/tutorials/chart-elements/interactive-chart- legend /)と[legend docs](https://www.zingchart.com/docs/api/json-configuration/graphset/legend/)属性 'highlightPlot:true'がそのトリックを行います。 – nardecky

関連する問題