dxChart의 '인수 필드'에 대한 정렬 기준은 무엇입니까?

Question

나는 차트 syde-by-syde 바에서 일하고 있는데, 내가 마쳤을 때 'argument field'의 순서가 잘못되어 올바른 순서로 보내고 있지만 차트에 장애가 발생했다.

이 필드를 정렬하는 방법에 대한 문서에서 아무것도 발견되지 않았습니다. 누군가 그것을 고칠 수있는 트릭을 알고 있다면 나는 매우 감사 할 것입니다.

은 여기 내 차트와 데이터 소스입니다 :

var dataSource = [ 
    { state: "01-Aug-2017", Juan_Sebastián: 7,María_Alejandra: 3,José_Tomás: 8,}, 
    { state: "02-Aug-2017",Juan_Sebastián: 1,María_Alejandra: 2, }, 
    { state: "03-Aug-2017",María_Alejandra: 3,Juan_Sebastián: 2,José_Tomás: 4,}, 
    { state: "04-Aug-2017",José_Tomás: 2,Juan_Sebastián: 4,},                         
    { state: "08-Aug-2017",José_Tomás: 1, }, 
    { state: "09-Aug-2017",María_Alejandra: 1,José_Tomás: 2,},                                    
    { state: "10-Aug-2017",Juan_Sebastián: 1,},                             
    { state: "14-Aug-2017",José_Tomás: 1,María_Alejandra: 2,},                            
    { state: "15-Aug-2017",Juan_Sebastián: 1,},                             
    { state: "16-Aug-2017",Juan_Sebastián: 1,José_Tomás: 2, },                          
    { state: "17-Aug-2017",María_Alejandra: 1,},                             
]; 

$("#bar-2").dxChart({ 
    equalBarWidth: false, 
    dataSource: dataSource, 
    commonSeriesSettings: { 
    argumentField: "state", 
    type: "bar" 
}, 
    series: [ 
{ valueField: "Juan_Sebastián", name: "Juan Sebastián"}, 
{ valueField: "María_Alejandra", name: "María Alejandra"}, 
{ valueField: "José_Tomás", name: "José Tomás"}, 

], 
legend: { 
    verticalAlignment: "bottom", 
    horizontalAlignment: "center"}, 
title: "Cantidad de casos por abogado" 
            }); 
           }); 

그리고이는 모습입니다 :

정말 원래는 dataSource의 순서를 변경하는 이유를 모르겠어요. 많은 감사!.

Answer 1

위의 차트와 데이터 소스 코드를 jsFiddle에서 실행하고 여기 코드 스 니펫에서 모든 것이 올바르게 표시됩니다.

https://jsfiddle.net/jmarking/089j1hrs/

var dataSource = [{ 
 
    state: "01-Aug-2017", 
 
    Juan_Sebastián: 7, 
 
    María_Alejandra: 3, 
 
    José_Tomás: 8, 
 
    }, 
 
    { 
 
    state: "02-Aug-2017", 
 
    Juan_Sebastián: 1, 
 
    María_Alejandra: 2, 
 
    }, 
 
    { 
 
    state: "03-Aug-2017", 
 
    María_Alejandra: 3, 
 
    Juan_Sebastián: 2, 
 
    José_Tomás: 4, 
 
    }, 
 
    { 
 
    state: "04-Aug-2017", 
 
    José_Tomás: 2, 
 
    Juan_Sebastián: 4, 
 
    }, 
 
    { 
 
    state: "08-Aug-2017", 
 
    José_Tomás: 1, 
 
    }, 
 
    { 
 
    state: "09-Aug-2017", 
 
    María_Alejandra: 1, 
 
    José_Tomás: 2, 
 
    }, 
 
    { 
 
    state: "10-Aug-2017", 
 
    Juan_Sebastián: 1, 
 
    }, 
 
    { 
 
    state: "14-Aug-2017", 
 
    José_Tomás: 1, 
 
    María_Alejandra: 2, 
 
    }, 
 
    { 
 
    state: "15-Aug-2017", 
 
    Juan_Sebastián: 1, 
 
    }, 
 
    { 
 
    state: "16-Aug-2017", 
 
    Juan_Sebastián: 1, 
 
    José_Tomás: 2, 
 
    }, 
 
    { 
 
    state: "17-Aug-2017", 
 
    María_Alejandra: 1, 
 
    }, 
 
]; 
 

 
$("#bar-2").dxChart({ 
 
    equalBarWidth: false, 
 
    dataSource: dataSource, 
 
    commonSeriesSettings: { 
 
    argumentField: "state", 
 
    type: "bar" 
 
    }, 
 
    series: [{ 
 
     valueField: "Juan_Sebastián", 
 
     name: "Juan Sebastián" 
 
    }, 
 
    { 
 
     valueField: "María_Alejandra", 
 
     name: "María Alejandra" 
 
    }, 
 
    { 
 
     valueField: "José_Tomás", 
 
     name: "José Tomás" 
 
    }, 
 

 
    ], 
 
    legend: { 
 
    verticalAlignment: "bottom", 
 
    horizontalAlignment: "center" 
 
    }, 
 
    title: "Cantidad de casos por abogado" 
 
});

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.0.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" /> 
 
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css" /> 
 
<script type="text/javascript" src="https://cdn3.devexpress.com/jslib/17.1.6/js/dx.all.js"></script> 
 
<div id="bar-2"></div>