1

我一直在使用 jqplot 在我目前正在工作的站点中绘制折线图。我喜欢它让我可以选择通过单击图例中的系列名称来切换系列。但是，我的问题是，用户不知道他们可以单击系列名称来切换系列并不断询问如何操作。

如何在系列名称旁边添加一个复选框以及可单击的系列名称，以便用户知道可以单击它以显示/隐藏图表中的一条线？我一直在寻找一段时间，但未能找到解决方案。

感谢您提供的任何帮助。

4

1 回答 1

2

我制作了一个向图例添加复选框的功能。然后，它为复选框提供了显示/隐藏每个系列趋势线的功能。然后它将说明添加到图例的底部。如果其他人正在寻找如何做到这一点，这里是：

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);
}

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

于 2013-09-11T23:14:02.360 回答