Kendo UI折線圖排序

我無法弄清楚如何在kendo UI折線圖中的x軸上正確排列類別。這是我的例子：Kendo UI折線圖排序

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="chart"></div> 
    <script src="js/thirdParty/jquery.js"></script> 
    <script src="js/thirdParty/kendo.all.min.js"></script> 
    <script> 
     $(function() { 
      var data, 
      dataSource; 
     data = [{ 
       type: "C1", 
       amount: 100, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 120, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2009 
      }, { 
       type: "C1", 
       amount: 10, 
       year: 2010 
      }, { 
       type: "C1", 
       amount: 120, 
       year: 2011 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2011 
      }]; 
     dataSource = new kendo.data.DataSource({ 
      data: data, 
      group: {field: "type"}, 
       sort: { field: "year" } 
     }); 
      $("#chart").kendoChart({ 
       dataSource: dataSource, 
       series: [{ 
        type: "line", 
        field: "amount", 
        categoryField: "year", 
        name: "#= group.value #" 
       }], 
      }) 
     }); 
    </script> 
</body> 
</html>

和這裏的輸出是什麼樣的屏幕截圖：

enter image description here

正如你可以看到這些年來正確排序，即使數據是一年秩序，我已經指定在kendo數據源中對年進行排序。

任何幫助，將不勝感激。

來源

2013-08-23 Carl Rippon

您需要幾年從數字轉換爲日期，e.g：

data = [{ 
      type: "C1", 
       amount: 100, 
       year: new Date(2008, 0, 1); 
      }, { 
       type: "C2", 
       amount: 120, 
       year: new Date(2009, 0, 1) 
      }, ... // etc.

然後，您可以進一步定義baseUnitStep步驟。

來源

2014-05-27 10:19:35 Amir

您需要添加綁定到你的圖表像這樣的數據：

<script> 
     $(function() { 
      var data, 
      dataSource; 
     data = [{ 
       type: "C1", 
       amount: 100, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 120, 
       year: 2008 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2009 
      }, { 
       type: "C1", 
       amount: 10, 
       year: 2010 
      }, { 
       type: "C1", 
       amount: 120, 
       year: 2011 
      }, { 
       type: "C2", 
       amount: 50, 
       year: 2011 
      }]; 
     dataSource = new kendo.data.DataSource({ 
      data: data, 
      group: {field: "type"}, 
       sort: { field: "year" } 
     }); 
      $("#chart").kendoChart({ 
       dataSource: dataSource, 
       series: [{ 
        type: "line", 
        field: "amount", 
        categoryField: "year", 
        name: "#= group.value #" 
       }], 
       dataBound: function(e) { 
      var axis = e.sender.options.categoryAxis; 
      axis.categories = axis.categories.sort(); 
     } 
      }) 
     }); 
    </script>

來源

2016-11-07 17:26:54 Cliff

Kendo UI折線圖排序

回答

相關問題