x軸の値が固定されていない角4単純な線図

Question

最も単純な折れ線グラフのライブラリが見つからないので、私は夢中になります。 （x、y）値のタプルを供給します。私が見つけられるすべての解決策は、固定値のx値（monday、tuesday、thursday、...）があるという事実に執着していますが、私は定義された範囲に単純なdouble値を持っていません！この単純な作業を行うことができない

ソリューション：NG2-チャート、NGX-チャート、Highcharts角度2、フュージョンチャートはAngular2

誰が私をしてください助けることはできますか？

Answer 1

primeng line chartはシンプルでパワフルです。

輸入

import {ChartModule} from 'primeng/primeng'; 

あなたのモジュールで

仕事にチャートコンポーネントのためには、プロジェクトにcharts.jsが含まれています。 CLIを使用した例は次のとおりです。

"scripts": [ 
    "../node_modules/chart.js/dist/Chart.js", 
    //..others 
], 

コンポーネント

export class LineChartDemo { 

data: any; 

msgs: Message[]; 

constructor() { 
    this.data = { 
     labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 
     datasets: [ 
      { 
       label: 'First Dataset', 
       data: [65, 59, 80, 81, 56, 55, 40], 
       fill: false, 
       borderColor: '#4bc0c0' 
      }, 
      { 
       label: 'Second Dataset', 
       data: [28, 48, 40, 19, 86, 27, 90], 
       fill: false, 
       borderColor: '#565656' 
      } 
     ] 
    } 
} 


} 

HTML

<p-chart type="line" [data]="data"></p-chart>