ExtJs时间图表显示不正确的标签

时间:2014-03-28 09:13:40

标签: javascript extjs charts extjs4 extjs-chart

ExtJS 4.0.7图表有什么问题?在这个小提琴中:http://jsfiddle.net/JPEEv/377/

var store = Ext.create('Ext.data.Store', {
  storeId: 'MyStore',
  fields: [{
    name: 'date', type: 'date'
  },{
    name: 'duration', type: 'float'
  }],
  data: [
    { date: new Date(2014,1,1), duration: 0.3}, 
    { date: new Date(2014,1,2), duration: 0.2}, 
    { date: new Date(2014,1,3), duration: 1.5}, 
    { date: new Date(2014,1,4), duration: 0.7}
  ]
});

var chart = Ext.widget('chart', {
  renderTo: Ext.getBody(),
  width: 800,
  height: 400,
  store: 'MyStore',
  axes: [{
    type: 'Time',
    position: 'bottom',
    fields: ['date'],
    dateFormat: 'd.M'
  }, {
    type: 'Numeric',
    position: 'left',
    fields: ['value']
  }],
  series: [{
    type: 'column',
    axis: ['left'],
    xField: 'date',
    yField: 'duration'
  }]
});
  1. 有5个日期标签,而不是4个
  2. 第三个值为1.5,但y轴的限制未调整
  3. 有没有办法在标签之间的空白处放置标签?

1 个答案:

答案 0 :(得分:1)

  1. 您使用type: 'Time'作为构建连续的X轴 时间轴并将标签放在任意位置。如果你想要1 每列标签,使用type: 'Category'并格式化字符串值 而不是日期值。
  2. 对于Y轴,将fields: ['value']替换为fields: ['duration'],以便它与商店中的字段具有相同的名称。
  3. 框架没有提供这样的配置,我没有在documentation
  4. 中找到它