3

多値軸と剣道ツリービューの剣道チャートがあります。チェックボックスの選択に従って値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

4

2 に答える 2

2

グラフの横にある値軸ラベルを非表示にするだけの場合は、チェックボックスが変更されたときに処理する関数を追加する必要があります。次に、チェックボックス変更ハンドラーで、グラフのvalueAxis配列で一致するオブジェクトを見つけ、次の2つのプロパティを設定します。

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

まず、ツリービューの変更時イベントイベントでチャートを変数に割り当てる必要があります。それがないと、ツリービューはチャートとその値軸を認識せず、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 に答える