X 축 값에 thekendo 열 차트 위해

Question

JS 빈

<div id="example" class="k-content"> 
     <div class="chart-wrapper"> 
      <div id="chart"></div> 
     </div> 
     <script> 
      var internetUsers = [ { 
        "Month": "1", 
        "year": "2010", 
        "value": 1 
       }, { 
        "Month": "2", 
        "year": "2010", 
        "value": 2 
       }, { 
        "Month": "3", 
        "year": "2010", 
        "value": 3 
       }, { 
        "Month": "4", 
        "year": "2010", 
        "value": 4 

       }, { 
        "Month": "5", 
        "year": "2010", 
        "value": 5 
       }, 
           { 
        "Month": "6", 
        "year": "2010", 
        "value": 6 
       }, { 
        "Month": "7", 
        "year": "2010", 
        "value": 7 
       }, { 
        "Month": "8", 
        "year": "2010", 
        "value": 8 

       }, 
           { 
        "Month": "9", 
        "year": "2010", 
        "value": 9 
       }, { 
        "Month": "10", 
        "year": "2010", 
        "value": 10 
       }, { 
        "Month": "11", 
        "year": "2010", 
        "value": 11 

       }, 
           { 
        "Month": "12", 
        "year": "2010", 
        "value": 17117.00 
       }, 
           { 
        "Month": "1", 
        "year": "2011", 
        "value": 12 
       }, { 
        "Month": "2", 
        "year": "2011", 
        "value": 13 
       }, { 
        "Month": "3", 
        "year": "2011", 
        "value": 4 
       }, { 
        "Month": "4", 
        "year": "2011", 
        "value": 6 

       }, { 
        "Month": "5", 
        "year": "2011", 
        "value": 24 
       }, 
           { 
        "Month": "6", 
        "year": "2011", 
        "value": 3 
       }, { 
        "Month": "7", 
        "year": "2011", 
        "value": 35 
       }, { 
        "Month": "8", 
        "year": "2011", 
        "value": 34 

       }, 
           { 
        "Month": "9", 
        "year": "2011", 
        "value": 22 
       }, { 
        "Month": "10", 
        "year": "2011", 
        "value": 21 
       }, { 
        "Month": "11", 
        "year": "2011", 
        "value": 215 

       }, 
           { 
        "Month": "12", 
        "year": "2011", 
        "value": 12 
       }]; 

      function createChart() { 
       $("#chart").kendoChart({ 
        theme: $(document).data("kendoSkin") || "default", 
        dataSource: { 
         data: internetUsers, 
         group: { 
         field: "year" 
         }, 
         sort: { 
          field: "year", 
          dir: "asc" 
         } 
        }, 
        title: { 
         text: "Sales" 
        }, 
        legend: { 
         position: "bottom" 
        }, 
        seriesDefaults: { 
         type: "column" 

        }, 
        series: [{ 

         field: "value" 


        }], 
        valueAxis: { 
         labels: { 
          format: "{0}$" 
         }, 

         line: { 
          visible: false 
         }, 
         axisCrossingValue: 0 
        }, 
        categoryAxis: { 
         field: "Month" 

        }, 

        tooltip: { 
         visible: true, 
         format: "{0}%", 
         template: "#= series.name #: #= value #" 
        } 
       }); 
      } 

      $(document).ready(function() { 
       setTimeout(function() { 
        // Initialize the chart with a delay to make sure 
        // the initial animation is visible 
        createChart(); 

        $("#example").bind("kendo:skinChange", function(e) { 
         createChart(); 
        }); 
       }, 400); 
      }); 
     </script> 
    </div> 

http://jsbin.com/oxakup/17/edit

,617,451하지 표시하기 이유

Answer 1

당신은 같은 달 대신 해하여 데이터 소스를 정렬 할 필요가 다음 이제 개월이 제대로 값을 기준으로 정렬이되어

sort: { field: "Month", dir: "asc" } 

를, 월 데이터 유형, 따라서 이유 대신 숫자의 문자열 있지만 이제 1, 10, 11, 12, 2, 3 등으로 정렬됩니다.

JSON 데이터 소스에서 수정하여 해결할 수 있지만 변경할 수없는 경우 다음을 사용할 수 있습니다. 다음을 처리하기 전에 dataSource에서 데이터의 형식을 지정하십시오.

schema: { 
    data: function(response) { 
    for (var i = 0; i < response.length; i++) { 
     response[i].Month = new Number(response[i].Month); 
    } 
    return response; 
    } 
}