kendo-ui - Kendo 图表值轴将在点击事件时更改

Question

我有带有多值轴和 Kendo Treeview 的 Kendo 图表。我想根据复选框选择显示值 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 数组中找到匹配的对象，并为其设置这 2 个属性:

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