angular2-highchartsグラフの移植時に例外をスローする

Question

Angular2-highchartsは、既存のグラフを移植しようとしているときにwierd例外をスローしています。下図のように私のグラフのためのコードは次のとおりです。 - 私はangular2-highchartsにポートにこれをしようとすると、以下のように

http://jsfiddle.net/kkulig/dx2vj8k1/

var chart = Highcharts.chart('container', { 

    chart: { 
    type: 'bar', 
    marginLeft: 10 
    }, 

    plotOptions: { 
    bar: { 
     dataLabels: { 
     enabled: true 
     } 
    } 
    }, 

    xAxis: { 
    left: '50%', 
    categories: ['15-19', '20-21'], 
    lineWidth: 0, 
    tickWidth: 0, 
    labels: { 
     align: 'left', 
     x: -18 
    }, 
    title: { 
     text: 'Age Group', 
     align: 'high', 
     rotation: 0, 
     x: 40 
    } 
    }, 

    yAxis: [{ 
    left: '55%', 
    width: '45%', 
    labels: { 
     enabled: false 
    }, 
    title: { 
     x: -160, 
     text: 'Female' 
    }, 
    gridLineWidth: 0 
    }, { 
    reversed: true, 
    width: '45%', 
    offset: 0, 
    labels: { 
     enabled: false 
    }, 
    title: { 
     x: 170, 
     text: 'Male' 
    }, 
    gridLineWidth: 0 
    }], 

    series: [{ 
    data: [1, 3] 
    }, { 
    data: [2, 5], 
    yAxis: 1 
    }] 
}); 

、私はかなり奇妙なエラーが発生します。私は何をしているのですか？

plnkrがここhttp://plnkr.co/edit/UvOmYi?p=preview

である私が見誤差は以下の通りです： -

上記Plnkrの出力はここにあります。右、左の幅を定義しながら、

Answer 1

このエラーは、割合の問題です。 angular2-highchartsはHighchartsプラグインです。AngularはTypescriptに基づいています。

width: '45%',は文字列であるため、width:window.innerWidth * .45を直接使用することはできません。

http://plnkr.co/edit/Bp3O8SwWjwkLFCRkrQPa?p=preview

chart: { 
    type: 'bar', 
    marginLeft: 10 
    }, 

    plotOptions: { 
    bar: { 
     dataLabels: { 
     enabled: true 
     } 
    } 
    }, 
    xAxis: { 
    left: window.innerWidth * .52, 
    categories: ['15-19', '20-21'], 
    lineWidth: 0, 
    tickWidth: 0, 
    labels: { 
     align: 'left', 
     x: -18 
    }, 
    title: { 
     text: 'Age Group', 
     align: 'high', 
     x: 10 
    } 
    }, 

    yAxis: [{ 
    left: window.innerWidth * .55, 
    width:window.innerWidth * .45, 
    labels: { 
     enabled: false 
    }, 
    title: { 
     x: -160, 
     text: 'Female' 
    }, 
    gridLineWidth: 0 
    }, { 
    reversed: true, 
    width: window.innerWidth * .45, 
    offset: 0, 
    labels: { 
     enabled: false 
    }, 
    title: { 
     x: 170, 
     text: 'Male' 
    }, 
    gridLineWidth: 0 
    }], 

    series: [{ 
    data: [1, 3] 
    }, { 
    data: [2, 5], 
    yAxis: 1 
    }] 
};