【问题标题】:jqplot legend control per series. Series showLabel not working with EnhancedLegendRenderer每个系列的 jqplot 图例控制。系列 showLabel 不适用于 EnhancedLegendRenderer
【发布时间】:2013-03-04 07:22:36
【问题描述】:

我希望在情节中选择性地隐藏某些系列的传说。这个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 配合使用。

【问题讨论】:

    标签: jqplot legend series


    【解决方案1】:

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

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

    玩弄 get() 中的数字,因为我不确定数字是如何映射到图例元素的。此解决方案比更改增强的LegendRenderer 代码要优雅得多。

    【讨论】:

    • 谢谢!我已将代码更改为: $("#chartXXX tr.jqplot-table-legend").first().hide();隐藏第一个表格行(第一个图例条目)。
    【解决方案2】:

    在文件jqplot.enhancedLegendRenderer.jsdraw 函数中,我们在大约第132 行看到:

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

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

    相反,尝试将|| 设置为&amp;&amp; - 这在我的情况下有效。请先尝试在未缩小版本上进行更改。

    编辑:

    首先要做的是做出我在原始答案中建议的更改。

    接下来,如果showLabelfalse,我们需要防止创建图例中的tr 元素。就在上面提到的 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

    【讨论】:

    • 我在发布问题后不久就尝试过同样的事情。但问题是,这对于 seriesToggle 选项来说并不是一个好兆头,即,单击一个可见的图例标签会删除其他的左右。所以我想这部分代码也必须改变以适应这个。
    • @Siva 好点。请参阅我的编辑。这相当复杂,但它对我有用。
    • 我觉得不错!也许您可以向jqplot repo 发送拉取请求,以便其他人也可以查看。
    【解决方案3】:

    我结合了 jbass 和 DaFrenk 的答案,结果是:

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多