angle2アプリにハイチャートのソースデータを追加

Question

projectにangular2-highchartsを使用しており、プロジェクトにhighcharts-more.jsを含める必要があるため、ソリッドゲージチャートを作成できません。可能であれば、これを含めてどうやって行くのですか？

この例のangle2ではなく、thisです。私はhighchartsとangular2-highchartsの両方がインストールされているとpackage.json内でこの

<script src="https://code.highcharts.com/highcharts-more.js"></script> 
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 

などの情報を含めることができるようにする必要があります。

Answer 1

It's working. angular2-seed-ng2highcharts 

ref: https://github.com/AngularShowcase/angular2-seed-ng2-highcharts 
    chart.html: 
    ------------- 
    <div [ng2-highcharts]="chartGauge" class="graph" ></div> 

    chart.component.ts: 
    ------------------ 

    Add series option within the chart option. 

    chartGauge = { 
      chart: { 
         type: 'solidgauge' 
        }, 

        title: { 
         text: 'ASUP' 

        }, 

        pane: { 
         center: ['50%', '70%'], 
         size: '140%', 
         startAngle: -90, 
         endAngle: 90, 
         background: { 
          backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', 
          innerRadius: '60%', 
          outerRadius: '100%', 
          shape: 'arc' 
         } 
        }, 


        tooltip: { 
         enabled: true 
        }, 

        // the value axis 
        yAxis: { 
         min: 0, 
         max: 200, 
         title: { 
          text: 'Speed' 
         } 
         stops: [ 
          [0.5, '#FF5252'], // red* 
          [0.9, '#69F0AE'] // green 

         ], 
         lineWidth: 0, 
         minorTickInterval: null, 
         tickAmount: 1, 
         title: { 
          y: -40 
         }, 
         labels: { 
          y: 15 
         } 
        }, 

        plotOptions: { 
         solidgauge: { 
          dataLabels: { 
           y: 25, 
           borderWidth: 0, 
           useHTML: true 
          } 
         } 
        } 
        series: [{ 
       name: 'Speed', 
       data: [80], 
       dataLabels: { 
        format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
         ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
          '<span style="font-size:12px;color:silver">km/h</span></div>' 
       }, 
       tooltip: { 
        valueSuffix: ' km/h' 
       } 
      }] 
     }; 

Answer 2

ここでは、Angluar2のソリッドゲージのデモをangular2-highchartsとしています。

http://plnkr.co/edit/6EtK5kldXPLWs6v6Dk3w?p=preview

私は両方必要なファイルインポートしています（ちなみにこれはHighchartsに関連して、第三者である。）angular2-highchartsで使用されるものと同じバージョンからhighcharts-moreとmodules/solid-gaugeを。 systemjs.config.jsファイルライン18-19とapp/main.jsライン4-8にあることがわかります。後の行のグループでは、追加ファイルはHighchartsで初期化されます。

私はusing Highcharts with modulesためangular2-highchartsデモに基づいて掲載しているデモ：http://plnkr.co/edit/4Eifda2IPpCjykONSQQJ?p=previewコードの

重要部品：

アプリ/ main.js：

... 
import { CHART_DIRECTIVES, Highcharts } from 'angular2-highcharts'; 
import HighchartsMore from 'highcharts/highcharts-more'; 
import HCSoldGauge from 'highcharts/modules/solid-gauge'; 

HighchartsMore(Highcharts); 
HCSoldGauge(Highcharts); 
... 

systemjs。 config.js：

... 
'angular2-highcharts':  'https://cdn.rawgit.com/gevgeny/angular2-highcharts/0.1.0/dist', 
'highcharts/highstock.src': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highstock.js', 
'highcharts/highcharts-more': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/highcharts-more.js', 
'highcharts/modules/solid-gauge': 'https://cdn.rawgit.com/highcharts/highcharts-dist/v4.2.1/modules/solid-gauge.js' 
...