領域の代わりに線をプロットする

Question

highchartsのデモはhighcharts-ngのマニュアルで入手できます。

私は領域グラフを描画したいが、実行すると領域は表示されず、行だけが表示される。

コードサンプルは以下のとおりです。

HTML：

<highchart id="chart1" config="chartConfig"></highchart> 

角度コントローラは

$scope.chartConfig = { 
    chart: { 
     type: 'area', 
     spacingBottom: 30 
    }, 
    title: { 
     text: 'Fruit consumption *' 
    }, 
    subtitle: { 
     text: '* Jane\'s banana consumption is unknown', 
     floating: true, 
     align: 'right', 
     verticalAlign: 'bottom', 
     y: 15 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'left', 
     verticalAlign: 'top', 
     x: 150, 
     y: 100, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Y-Axis' 
     }, 
     labels: { 
      formatter: function() { 
       return this.value; 
      } 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>' + this.series.name + '</b><br/>' + 
       this.x + ': ' + this.y; 
     } 
    }, 
    plotOptions: { 
     area: { 
      fillOpacity: 0.5 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'John', 
     data: [0, 1, 4, 4, 5, 2, 3, 7] 
    }, { 
     name: 'Jane', 
     data: [1, 0, 3, null, 3, 1, 2, 1] 
    }] 
}; 

ドキュメントページで利用可能な視覚化したものです：

I自分のコンピュータ上でレンダリングされたチャートがあるのに対し：

Answer 1

highcharts-ngのconfigオブジェクトは、正確にhighchartsオブジェクトのようではありません。 https://github.com/pablojim/highcharts-ng

プロットオプション/ツールチップ/ドリルダウン/その他の機能が動作しないのはなぜですか？ 提出されたすべての問題の少なくとも半分がこれに起因します。問題を提出する前にこれを読んでください！一般的なエラーは、他のHighchartsオプションを直接chartConfigに入れることです。一般的に、上記のHighchartsオプションが上記のリストにない場合は、おそらくそれをchartConfig.optionsに入れたいと思うでしょう。

グラフの種類を変更するには（ハイチャートのオプションには表示されません）、optionsというメンバ変数を使用します。

options: { 
     //This is the Main Highcharts chart config. Any Highchart options are valid here. 
     //will be overriden by values specified below. 
     chart: { 
     type: 'area', 
     spacingBottom: 30 
     } 
    }, 

http://jsfiddle.net/Cp73s/5198/