每个系列的jqplot图例控件。系列showLabel无法使用EnhancedLegendRenderer

时间:2013-03-04 07:22:36

标签: jqplot legend series

我希望有选择地隐藏一些情节中的一些系列的传说。这个http://www.jqplot.com/docs/files/jqplot-core-js.html#Series.showLabel看起来是正确的选择。

但使用series:{showLabel:false}似乎不起作用。

这方面的开放(旧)门票:https://bitbucket.org/cleonello/jqplot/issue/100/feature-request-individual-legend-control

我使用它吗?任何其他解决方法来实现这一点也是值得赞赏的。

更新

showLabel适用于普通的LegendRenderer。

3 个答案:

答案 0 :(得分:2)

在你的jqplot下面添加这一行:

$($("#chartXXX .jqplot-table-legend").get(0)).hide();

使用get()中的数字,因为我不确定数字是如何映射到图例元素的。此解决方案比更改enhancedLegendRenderer代码更优雅。

答案 1 :(得分:1)

draw文件的jqplot.enhancedLegendRenderer.js函数中,我们在第132行看到了这一点:

if (idx < series.length && (series[idx].show || series[idx].showLabel)){

对于上下文,这段代码是创建图例表的功能的一部分。如果系列设置为显示(默认为true)或要显示系列标签,则会创建一行。这意味着,为了防止为系列创建图例项,您需要隐藏整个系列本身,并将showLabel设置为false,这是不理想的。

相反,请尝试将||设置为&& - 这在我的案例中有效。首先尝试对未经管理的版本进行更改。

修改

要做的第一件事就是在我原来的答案中做出改变。

接下来,如果trshowLabel,我们需要阻止创建图例中的false元素。就在上面提到的if语句之前,您将看到以下代码:

tr = $(document.createElement('tr'));
tr.addClass('jqplot-table-legend');
if (reverse){
    tr.prependTo(this._elem);
}
else{
    tr.appendTo(this._elem);
}

将其更改为此(我们在此处所做的就是将它包装在我们之前使用的相同if语句中):

if (idx < series.length && (series[idx].show && series[idx].showLabel)){
    tr = $(document.createElement('tr'));
    tr.addClass('jqplot-table-legend');
    if (reverse){
        tr.prependTo(this._elem);
    }
    else{
        tr.appendTo(this._elem);
    }
}

向下滚动一些(关于第212行),您将看到以下代码:

if (this.showLabels)  {
    console.log(this._elem.find('tr').length - 1);
    td2.bind('click', {series:s, speed:speed, plot: plot, replot:this.seriesToggleReplot }, handleToggle);
    td2.addClass('jqplot-seriesToggle');
}

这是在图例中单击其中一个系列时绑定事件处理程序。我们需要做的是向对象文字添加一个附加属性,该属性封装传递给click方法的数据:

td2.bind('click', {series:s, speed:speed, plot: plot,
    replot:this.seriesToggleReplot,
    trIndex: this._elem.find('tr').length - 1 }, handleToggle);

trIndex表示HTML表中行的实际索引。正是这样才能确保图例能够打破正确的元素。

doLegendToggle声明中,您将看到如下代码:

if (s.canvas._elem.is(':hidden') || !s.show) {
    // Not sure if there is a better way to check for showSwatches and showLabels === true.
    // Test for "undefined" since default values for both showSwatches and showLables is true.
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) {
        plot.legend._elem.find('td').eq(sidx * 2).addClass('jqplot-series-hidden');
    }
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) {
        plot.legend._elem.find('td').eq((sidx * 2) + 1).addClass('jqplot-series-hidden');
    }
}
else {
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) {
        plot.legend._elem.find('td').eq(sidx * 2).removeClass('jqplot-series-hidden');
    }
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) {
        plot.legend._elem.find('td').eq((sidx * 2) + 1).removeClass('jqplot-series-hidden');
    }
}

查看sidx变量的这四个引用,更改它们,以便代码使用trIndex变量。为此,请使用sidx替换四个d.trIndex引用。

答案 2 :(得分:0)

好吧,我结合了jbass和DaFrenk的回答,结果是:

$($("#chartXXX tr.jqplot-table-legend").get(0)).hide();

get中的数字是基于零的索引,它定义了图例表中的行。这正是我想要的。