EXTJS动态刷新chart的fields

EXTJS动态刷新chart的fields

 

最近遇到一个需求，chart要展示的曲线将来可能是曲线的条数，名字，数据什么的都会改变，最主要的是要在同一个chart处能够通过下来选项框，选择任意展示数据曲线（也许一开始可能觉得，那我定义多个chart，每个chart对应一个下拉选项不就好了，但是，问题在于，现在下拉选项也是未来可能会动态增加的）

Chart动态刷新fields，实际上就是chart中绘制的多条线可能是不固定的，动态改变的，或者至少说是chart的每条线的对应的fields域名是动态改变的。

简单举个例子，可能一般写chart，都会定义纵坐标横左边的fields，这样方便从后台获取得到json数组时解析json对象属于自己的内容方便。一般情况下没有特殊需要都是在前台js处写死的fields，但是如果某天你的需求会改变，你展示的线可能还是那几条线，但是换了一组数据，名字啊，数据啊全改变了，这些数据是未知的，将来的改变，你现在是不知道的。那你要怎样，才能在你原本的chart位置绘制出适应新数据的曲线图表。

 

一般使用EXTJs创建chart使用如下方式：

 <strong>var chart = Ext.create('Ext.chart.Chart',{     
       animate: true, 
       shadow: true,
         theme: 'Category1',
         legend: {
             position: 'right'
         },   
       store: store,
       axes: [{         
        type: 'Numeric',       
        position: 'left',       
        fields: [dataField],        
        label: {       
         renderer:Ext.util.Format.numberRenderer('0,0')         
        },             
         minorTickSteps: 1,
        minimum: 0,
        maxmum: 100     
       }, {        
        type: 'Category',       
        position: 'bottom',        
        fields: ['name']     
       }],
       series: [{ type: 'line',       
          highlight: {           
           size: 1,            
           radius: 1       
          }, 
          axis: 'left',
         xField : 'name',
         yField : dataField,
         smooth: true,
            style: {
               fill: style,
                stroke:style,
               'stroke-width': 3
            },
            markerConfig: {
                type:'circle',
                size: 4,
                radius: 4,
               'stroke-width': 0,
                fill: style,
                stroke: style
            },
            tips: {  
           trackMouse:true,