关于Highcharts 嵌入 extjs的问题


Ext.onReady(function(){ 
var sss = '${jsonStr}';
var json1 = $.parseJSON(sss);
var json = eval(json1); 
var cg = json.baobiao[0].orgName;
var liftNum = json.baobiao[0].liftNum;
var badNum = json.baobiao[0].badNum;
var failureRate = json.baobiao[0].failureRate;
var failureTime = json.baobiao[0].failureTime;
var failure = json.baobiao[0].failure;
var chart = new Highcharts.Chart();

var tabs = new Ext.TabPanel({
renderTo:'liftFailureReportInfoTb',
activeTab: 0,
items: [{
html: '<div id="container" style="width: auto;height: 487px; margin: 0 auto"></div>',
afterRender: function () {
 $("#container").highcharts({
  chart: {
renderTo: 'container', //DIV 的ID
defaultSeriesType: 'column'//显示类型 ：柱状
},
title: {
text: '报表' //标题
},
xAxis: { //X轴命名
categories: cg,
labels:{
formatter:function(){
var s = this.value;
  if(s.length <= 6){
  return '<label style="cursor: pointer;" title="'+s+'">'+s+'</label>';
  }else
  {
  return '<label style="cursor: pointer;" title="'+s+'">'+s.substring(0,6)+'...</label>';
  }
  }
}
},
yAxis: { //Y轴命名
min: 0, //最小值
title: {
text: '说明 (台)' //Y轴说明
}
},
credits: {
              enabled: false
          },
tooltip: {  //显示元素名称
formatter: function() {
if(this.series.name =="故障率")
{
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y ;
}
else if(this.series.name =="故障次数")
{
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'次';
}
else if(this.series.name =="故障频率")
{
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'次/台';
}
else
{
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y + '台';
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: 
[
{
name: '数',
data: liftNum
}, 
{
name: '数',
data: badNum
}, 
{
name: '故障率',
data: failureRate
},
{
name: '故障次数',
data: failureTime
},
{
name: '故障频率',
data: failure
}
]
 })
}
}]
})
}
页面中
<body>
<div id="liftFailureReportInfoTb"></div>
</body>前面的变量数据时从后台传过来的，
引用的一些主要js
jquery-1.4.min.js
highcharts.js
jquery.min.js
页面刷新无法显示数据，报JS错，什么80020101什么的，完全看不懂，刚开始接触extjs，还请大神帮忙看下
Ext是3.2版本，highcharts是2.3.3的Ext JSJavaScript

解决方案 »

  1.   

    解决了，就是看的楼上的帖子，不过有些改动，贴出来分享下吧var sss = '${jsonStr}';
    var json1 = $.parseJSON(sss);
    var json = eval(json1); 
    var cg = json.baobiao[0].orgName;
    var liftNum = json.baobiao[0].liftNum;
    var badNum = json.baobiao[0].badNum;
    var failureRate = json.baobiao[0].failureRate;
    var failureTime = json.baobiao[0].failureTime;
    var failure = json.baobiao[0].failure;
    Ext.onReady(function(){ 
    function createReport()
    {
    var chart;
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container', //DIV 的ID
    defaultSeriesType: 'column'//显示类型 ：柱状
    },
    title: {
    text: '电梯故障报表' //标题
    },
    xAxis: { //X轴命名
    categories: cg,
    labels:{
    formatter:function(){
    var s = this.value;
      if(s.length <= 6){
      return '<label style="cursor: pointer;" title="'+s+'">'+s+'</label>';
      }else
      {
      return '<label style="cursor: pointer;" title="'+s+'">'+s.substring(0,6)+'...</label>';
      }
      }
    }
    },
    yAxis: { //Y轴命名
    min: 0, //最小值
    title: {
    text: '说明 (台)' //Y轴说明
    }
    },
    credits: {
                  enabled: false
              },
    tooltip: {  //显示元素名称
    formatter: function() {
    if(this.series.name =="电梯故障率")
    {
    return '<b>'+ this.series.name +'</b><br/>'+
    this.x +': '+ this.y ;
    }
    else if(this.series.name =="故障次数")
    {
    return '<b>'+ this.series.name +'</b><br/>'+
    this.x +': '+ this.y +'次';
    }
    else if(this.series.name =="故障频率")
    {
    return '<b>'+ this.series.name +'</b><br/>'+
    this.x +': '+ this.y +'次/台';
    }
    else
    {
    return '<b>'+ this.series.name +'</b><br/>'+
    this.x +': '+ this.y + '台';
    }
    }
    },
    plotOptions: {
    column: {
    pointPadding: 0.2,
    borderWidth: 0
    }
    },
    series: 
    [
    {
    name: '电梯数',
    data: liftNum
    }, 
    {
    name: '故障电梯数',
    data: badNum
    }, 
    {
    name: '电梯故障率',
    data: failureRate
    },
    {
    name: '故障次数',
    data: failureTime
    },
    {
    name: '故障频率',
    data: failure
    }
    ]
    });
    }
    var tabs = new Ext.Panel({
    renderTo:'liftFailureReportInfoTb',
    items: [{
    html: '<div id="container" style="width: auto;height: 487px; margin: 0 auto"></div>',
    afterRender: function () {
     createReport();
    }
    }]
    })
    })
    </script>
    </HEAD>
    <body>
    <div id="liftFailureReportInfoTb"></div>
    </body>
    </HTML>