Question

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

如何在系列名称旁边添加一个复选框以及可点击的系列名称，以便用户知道可以点击它来显示/隐藏图表中的一行？我一直在寻找，但一直无法找到解决方案。

感谢您提供的任何帮助。

Answer 1

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

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

注意：您必须已经为每个系列明确创建了trendline对象，而不仅仅是在seriesDefaults对象中。

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

1 个答案: