jqplot - 在使用多個不同渲染器的系列時獲取錯誤

Question

我最近開始在我們的web應用中使用jqplot庫來渲染圖。我已經下載了版本1.0.8r1250。我正在使用jQuery的1.7版本。我試圖在同一個畫布中繪製一個條形圖和一個線條圖。根據jqplot發行版中的文檔和示例，以下是我如何配置它。

function drawGraph(data) { 
    $("#char1").empty(); 
    $.jqplot.config.enablePlugins = true; 
    var lockinsByMarkup = []; 
    var lockinMarkupData = 'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0; 
    for (var prop_name in lockinMarkupData) { 
     lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]) 
    } 
    var recommendations = [1,2,3,4,5,6]; 
    var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], { 
     // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
     animate: !$.jqplot.use_excanvas, 
     title: 'Current Customer Item Prices (CIP)', 
     axesDefaults: { 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
      tickOptions: { 
       showGridline: false 
      } 
      }, 
     seriesDefaults:{ 
      pointLabels: { show:true, hideZeros:true} 
     }, 
     axes: { 
      xaxis: { 
       label:'Markup %', 
       renderer: $.jqplot.CategoryAxisRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       tickOptions: { 
        fontFamily: 'Georgia', 
        fontSize: '10pt', 
        angle: -30 
       } 
      }, 
      yaxis: { 
       label: '# of CIP Records', 
       showTicks: false 
      } 
     }, 
     series: [ 
      { 
      renderer: $.jqplot.BarRenderer 
      }, 
      { 
      renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case 
      showMarker: false, 
      showLine: false, 
      pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']} 
      } 
     ], 
     grid:{ 
      drawBorder: true, 
      shadow: false 
     } 
    }); 
    } 

我有以下的div在頁面上 - <div id="chart1" style="height:400px;width:500px; "></div>，我執行一個按鈕的點擊上述功能。

發生了什麼是，我得到這個錯誤 - Uncaught illegal access在jquery.jqplot.min.js。

如果我只有一個系列，它工作正常。自昨天下午以來，我一直在爲錯誤而奮鬥。有人可以告訴我我做錯了什麼嗎？

我已經包括以下js和css文件我的網頁上

jquery-1.7.min.js 
    jquery.jqplot.min.js 
    jqplot.barRenderer.min.js 
    jqplot.categoryAxisRenderer.min.js 
    jqplot.pointLabels.min.js 
    jqplot.canvasTextRenderer.min.js 
    jqplot.canvasAxisTickRenderer.min.js 
    jqplot.canvasAxisLabelRenderer.min.js 
    jquery.jqplot.min.css 

感謝您的幫助。

Answer 1

這裏是解決方案：jsFiddle link

$(document).ready(function(){ 
    function drawGraph(data) { 
    $("#chart1").empty(); 
    $.jqplot.config.enablePlugins = true; 
    var lockinsByMarkup = []; 
     var recommendations = []; 
     var lockinMarkupData = {'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0}; 
    for (var prop_name in lockinMarkupData) { 
     lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]); 
     recommendations.push([prop_name, Math.round(Math.random()*10)]); 
    } 
    var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], { 
     // Only animate if we're not using excanvas (not in IE 7 or IE 8).. 
     animate: !$.jqplot.use_excanvas, 
     title: 'Current Customer Item Prices (CIP)', 
     axesDefaults: { 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
      tickOptions: { 
       showGridline: false 
      } 
      }, 
     seriesDefaults:{ 
      pointLabels: { show:true, hideZeros:true} 
     }, 
     axes: { 
      xaxis: { 
       label:'Markup %', 
       renderer: $.jqplot.CategoryAxisRenderer, 
       tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
       tickOptions: { 
        fontFamily: 'Georgia', 
        fontSize: '10pt', 
        angle: -30 
       } 
      }, 
      yaxis: { 
       label: '# of CIP Records', 
       showTicks: false 
      } 
     }, 
     series: [ 
      { 
      renderer: $.jqplot.BarRenderer 
      }, 
      { 
      renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case 
      showMarker: true, 
      showLine: true, 
      // pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']} 
      } 
     ], 
     grid:{ 
      drawBorder: true, 
      shadow: false 
     } 
    }); 
    } 

    drawGraph(); 
});