劍道圖表值軸將在點擊事件時發生變化

我有多值軸和劍道樹視圖的劍道圖。我想根據複選框選擇顯示值軸。例如，我們將檢查「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

來源

2013-03-26 user2138545

首先，你需要圖表分配給一個變量在樹的上更改事件事件查看，但沒有樹視圖無法識別圖表和它的數值軸，並且按照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-09 05:37:42 dvv

如果你只想隱藏在圖表的一側價值軸標籤，你會想要一個功能添加到當複選框更改時處理。然後在複選框更改處理，找到圖表的valueAxis數組中的匹配對象，並在其上設置這兩個屬性：

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

來源

2013-03-26 17:17:04 CodingWithSpike

請問您能舉一個例子嗎？ – user2138545 2013-03-27 04:23:52

請回復我，這對我很有用。 – user2138545 2013-03-27 11:33:42

劍道圖表值軸將在點擊事件時發生變化

回答

相關問題