将复选框添加到jqplot线图的图例中。

I have been using jqplot to plot the line graph in a site I am working on currently. I love how it give me an option to toggle a line series by clicking on the series name in its legend. However, my problem is, the users don't know that they can click on the series name to toggle the series and keep asking how to do it.

我一直在使用jqplot在我正在工作的网站上绘制线形图。我喜欢它给我一个选项，可以通过点击它的传奇中的系列名称来切换系列。但是，我的问题是，用户不知道他们可以点击这个系列的名字来切换这个系列，并一直问如何做。

How can I add a checkbox beside the series name together with the clickable series name so that the users know that it can be clicked to show/hide a line from the graph? I have been searching for a while but have not been able to find a solution.

我怎样才能将一个复选框添加到序列名称旁边，然后加上可点击的序列号，这样用户就知道可以点击来显示/隐藏图形中的一条线了?我已经找了一段时间，但还没找到解决办法。

Thanks for any help provided.

谢谢你提供的帮助。

1 个解决方案

#1

I've made a function that adds checkboxes to the legend. It then gives the checkboxes the functionality of showing/hiding trendlines for each series. Then it adds instructions to the bottom of the legend. If anybody else is looking for how to do this, here it is:

我已经创建了一个函数，将复选框添加到这个图例中。然后，它给复选框显示每个系列的显示/隐藏趋势线的功能。然后，它向传奇的底部添加指令。如果还有人想知道怎么做，这里是:

function addTrendLineButtons() {
    $legend = $("table.jqplot-table-legend", $chartCanvas);
    $legendRows = $("tbody tr.jqplot-table-legend", $legend);

    $legendRows.each(function(idx) {
        $checkbox = $('<input />', {
            type: 'checkbox',
            checked: $jqPlot.options.series[idx].trendline.show
        });
        $checkbox.appendTo($(this));
        $checkbox.change(function() {
            $jqPlot.options.series[idx].trendline.show = $(this).is(":checked");
            $jqPlot.replot($jqPlot.options);
            addTrendLineButtons();
        });
    });

    $instructions = $('<tfoot><tr><td colspan=3>Check box to<br />show trendline</td></tr></tfoot>');
    $instructions.css('text-align', 'right');
    $instructions.appendTo($legend);
}

Note: you must have already explicitly created the trendline object for each series, not just in the seriesDefaults object.

注意:您必须已经显式地为每个系列创建了trendline对象，而不仅仅是在seriesDefaults对象中。