3

我有带有多值轴和剑道树视图的剑道图表。我想根据复选框选择显示值轴。例如，我们将选中“KM”复选框，然后图表将显示 KM 值轴。

可能吗？

这是我的图表代码：

function createChart() {
    $("#chart").kendoChart({

        legend: {
            position: "top"
        },
        series: [{
            type: "column",
            data: [20, 40, 45, 30, 50],
            stack: true,
            name: "on battery",
            color: "#003c72"
        }, {
            type: "column",
            data: [20, 30, 35, 35, 40],
            stack: true,
            name: "on gas",
            color: "#0399d4"
        }, {
            type: "area",
            data: [30, 38, 40, 32, 42],
            name: "mpg",
            color: "#642381",
            axis: "mpg"
        }, {
            type: "area",
            data: [7.8, 6.2, 5.9, 7.4, 5.6],
            name: "l/100 km",
            color: "#e5388a",
            axis: "l100km"
        }],
        valueAxes: [{
            title: { text: "miles" },
            min: 0,
            max: 100
        }, {
            name: "km",
            title: { text: "km" },
            min: 0,
            max: 161,
            majorUnit: 32
        }, {
            name: "mpg",
            title: { text: "miles per gallon" },
            color: "#642381"
        }, {
            name: "l100km",
            title: { text: "liters per 100km" },
            color: "#e5388a"
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],

            axisCrossingValues: [0, 0, 10, 10]
        }
    });
}

$(document).ready(function() {
    setTimeout(function() {
        createChart();

        $("#example").bind("kendo:skinChange", function(e) {
            createChart();
        });
    }, 400);
});

我的 jsbin：http: //jsbin.com/eyibar/4/edit

4

2 回答 2

2

如果您只想隐藏图表侧面的值轴标签，则需要添加一个函数来处理复选框更改时的处理。然后在复选框更改处理程序中，在图表的 valueAxis 数组中找到匹配的对象，并在其上设置以下 2 个属性：

valueAxes: [{
    ...
    visible: false,
    title: { visible: false },
    ...
}]
于 2013-03-26T17:17:04.717 回答
1

首先，您需要将图表分配给树视图的 on-change 事件事件中的变量，否则树视图无法识别图表及其值轴，并且通过 valueAxes 的名称，您需要检查树视图节点和然后推动 valueAxes。

$("#treview").on("change", function (e) {
                var chart = $("#chart").data("kendoChart");
                var checkedSeries = [];
                if ($("#treeview").find(":checked").length !== 0) {
                    $("#treeview").find(":checked").each(function () {
                        var nodeText = $(this).parent().parent().text();
                        $.each(valueAxes, function (index, valueAxes) {
                            if (valueAxes.name == nodeText) {
                                checkedSeries.push(valueAxes);
                                checkedSeries.visible = true;
                            }
                        });
                    });
                    createChart(checkedSeries);
                }
                else {
                    createChart(checkedSeries);
                }
            });
于 2013-04-09T05:37:42.643 回答