dxChart中“参数字段”的排序标准是什么?

时间:2017-09-11 21:38:40

标签: javascript graph charts devexpress datasource

我在图表syde-by-syde栏中工作,当我完成时,我看到我的'参数字段'的顺序是错误的,我发送的顺序正确,但图表显示无序。

关于如何对此字段进行排序的文档中没有找到任何内容。如果有人知道修复它的技巧,我将非常感激。

这是我的图表及其数据源:

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"
                                    });
                                });

这就是它的样子:

enter image description here

我真的不知道为什么要更改原始dataSource的顺序。 非常感谢!。

1 个答案:

答案 0 :(得分:0)

当我在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>
&#13;
&#13;
&#13;