Ошибка Highcharts # 13 для диаграмм пулей

Question

Я пытаюсь использовать диаграмму bullet на моей странице, но у меня есть ошибка «Highcharts Error # 13», я нашел решения здесь, но это мне совсем не помогло.

Я взял этот код со скрипки и просто хотел вставить его в свой код. Этот код отлично работает в скрипке, но после того, как я обнаружил ошибку в своей консоли, я переместил ее в плункер, и ничего не происходит, такая же проблема в консоли.

Кто-нибудь может мне определить, что я делаю неправильно?

есть мой JS файл:

//------------------------------------------------------- 
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) { 
    return ['M',x ,y + width/2,'L',x+height,y + width/2]; 
}; 
//------------------------------------------------------- 
Highcharts.setOptions({ 
    chart:{ 
     type:'bar', 
     margin:[5,15,10,100], 
    }, 
    credits:{enabled:false}, 
    exporting:{enabled:false}, 
    legend:{enabled:false}, 
    title:{text:''}, 
    xAxis:{ 
     tickLength:0, 
     lineColor:'#999', 
     lineWidth:1, 
     labels:{style:{fontWeight:'bold'}} 
    }, 
    yAxis:{ 
     min:0, 
     minPadding:0, 
     maxPadding:0, 
     tickColor:'#ccc', 
     tickWidth:1, 
     tickLength:3, 
     gridLineWidth:0, 
     endOnTick:true, 
     title:{text: ''}, 
     labels:{ 
      y:10, 
      style:{ 
       fontSize:'8px' 
      }, 
      formatter:function(){ 
       if (this.isLast){ 
        return this.value + ' %'; 
       } 
       else{ 
        return this.value; 
       } 
      } 
     } 
    }, 
    tooltip:{ 
     enabled:true, 
     backgroundColor:'rgba(255, 255, 255, .85)', 
     borderWidth:0, 
     shadow:true, 
     style:{fontSize:'10px',padding:8}, 
     formatter:function() { 
      return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>"; 
     } 
    }, 
    plotOptions:{ 
     bar:{ 
      color:'#000', 
      shadow:false, 
      borderWidth:0, 
     }, 
     scatter:{ 
      marker:{ 
       symbol:'line', 
       lineWidth:3, 
       radius:8, 
       lineColor:'#000' 
      } 
     } 
    } 
}); 
//------------------------------------------------------- 
$(document).ready(function() { 

var chart1 = new Highcharts.Chart({ 
    chart:{renderTo:'container'}, 
    xAxis:{categories:['bar']}, 
    yAxis:{ 
     max:100, 
     labels:{y:10,style:{fontSize:'8px'}}, 
     plotBands:[{from:0,to:70,color: 'rgba(103,103,103,.35)'}, 
      {from:70,to:85,color: 'rgba(153,153,153,.35)'}, 
      {from:85,to:100,color: 'rgba(204,204,204,.35)'}] 
    }, 
    series:[{name:'Measure',pointWidth:10,data:[80]}, 
     {name:'Target',type: 'scatter',data:[90],}] 
}); 
}(jQuery)); 
//------------------------------------------------------- 

и это Див на моей странице

<div id="container" style="height:36px;width:350px;"></div> 

Answer 1

Вы весь код должен быть помещен в document.ready.

$(document).ready(function() { 
//------------------------------------------------------- 
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) { 
    return ['M', x, y + width/2, 'L', x + height, y + width/2]; 
}; 

Fixed демо: http://jsfiddle.net/hqykwrjd/1/