Question

我最近开始使用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>我正在点击按钮执行上述功能。

发生的事情是，我收到此错误 - jquery.jqplot.min.js中的Uncaught illegal access。

如果我只有一个系列，它工作正常。自昨天下午以来，我一直在努力解决错误。有人可以告诉我我做错了吗？

我在页面上包含了以下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();
});

jqplot - 使用具有不同渲染器的多个系列时出错

1 个答案: