Kendo UI line chart порядок сортировки

Я не могу понять, как правильно упорядочить категории по оси x в линейной диаграмме пользовательского интерфейса кендо. Вот мой пример:Kendo UI line chart порядок сортировки

<!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

Как вы можете видеть годы упорядочены неправильно, даже если данные в год порядке и Я указал сортировку по году в источнике данных кендо.

Любая помощь будет оценена по достоинству.

источник

2013-08-23 Carl Rippon

Вы должны преобразовать года из числа на сегодняшний день, например:

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 line chart порядок сортировки

ответ

Смежные вопросы