Question

我有多值轴和剑道树视图的剑道图。我想根据复选框选择显示值axis-es。例如，我们将选中“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

Answer 1

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

valueAxes: [{
    ...
    visible: false,
    title: { visible: false },
    ...
}]

Answer 2

首先，您需要在树视图的on-change事件事件中将图表分配给变量，而不是树视图无法识别图表及其值轴和您需要检查的值的值。树视图节点，然后推送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);
                }
            });

Kendo Chart Value轴将在点击事件中更改

2 个答案: