javascript - Highcharts 子弹图错误 #13

Question

我试图在我的页面中使用项目符号图，但出现错误“Highcharts Error #13”，我在这里找到了解决方案，但它根本没有帮助我。

我从 fiddle 中获取了这段代码，只是想将其插入到我的代码中。这段代码在 fiddle 中工作正常，但在我在控制台中发现错误后，我将其移至 plunker 中，但没有任何反应，控制台中也出现同样的问题。

有人可以帮我定义一下我做错了什么吗？

这是我的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

<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];
};

修复演示:http://jsfiddle.net/hqykwrjd/1/