검도 차트 클릭 이벤트에서 값 축이 변경됩니다.

Question

다중 값 축 및 검도 트리 뷰가있는 검도 차트가 있습니다. 체크 박스 선택에 따라 값 축을 표시하고 싶습니다. 예를 들어 "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

먼저 당신이 나무에 변화 이벤트 이벤트에 변수에 차트를 할당해야 보기가 없다면 트리보기는 차트를 인식하지 못하고 값 축이고 valueAxes의 이름으로 treeview 노드를 확인한 다음 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); 
       } 
      }); 

Answer 2

그냥 차트의 측면에있는 값 축 레이블을 숨기려면, 당신이 기능을 추가 할 것 확인란이 변경되면 처리하십시오. 그런 다음 확인란 변화 처리기에서 차트의 valueAxis 배열에 일치하는 개체를 찾을, 그 위에이 두 속성을 설정합니다

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