Ось значений диаграммы кендо будет изменена при нажатии кнопки

У меня есть диаграмма кендо с осью нескольких значений и древовидным представлением кендо. Я хочу показать оси значений в соответствии с выбором флажка. Например, мы установим флажок «КМ», после чего на графике будет отображаться ось значения КМ.

Является ли это возможным?

Вот мой код диаграммы:

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


kendo-ui kendo-treeview kendo-dataviz
person user2138545    schedule 26.03.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Сначала вам нужно назначить диаграмму переменной в событии события изменения древовидного представления, при этом древовидное представление не распознало диаграмму и ее ось значений, а по имени осей значений вам нужно проверить узел древовидного представления и затем нажмите значениеAxes.

$("#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);
                }
            });
person dvv    schedule 09.04.2013

arrow_upward
2
arrow_downward

Если вы просто хотите скрыть метку оси значений сбоку от диаграммы, вам нужно добавить функцию для обработки при изменении флажков. Затем в обработчике изменений флажка найдите соответствующий объект в массиве valueAxis диаграммы и установите для него эти 2 свойства:

valueAxes: [{
    ...
    visible: false,
    title: { visible: false },
    ...
}]
person CodingWithSpike    schedule 26.03.2013
comment
не могли бы вы привести мне один пример, пожалуйста? - person user2138545; 27.03.2013
comment
Пожалуйста, ответьте мне, это очень полезно для меня. - person user2138545; 27.03.2013