2017-06-20 117 views
0

因爲我無法找到最簡單的折線圖的庫,您可以想到的是我變得瘋狂了:定義一個(雙)最小值和最大值x軸併爲其提供(x,y)值的元組。我可以找到的每個解決方案都癡迷於這樣一個事實,即我有一組固定的x值(星期一,星期二,星期四,......),但是沒有在定義的範圍內有簡單的雙精度值!沒有固定x軸值的角度4簡單折線圖

的解決方案,是無法做到這一點簡單的任務:NG2,圖表,NGX-圖表,Highcharts角2,融合圖表Angular2

任何人可以幫助我嗎?

+1

林混淆你是問。像這樣?http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays/ – LLai

+0

ngx-charts是用d3構建的.js,你可以編輯代碼來從字面上畫任何東西*你想要 –

+0

@LLai非常感謝你!我不知道Highcharts支持數據數組中的二維值。 – Aydo

回答

0

我覺得你可以使用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> 
+0

不,這正是我不想要的。這隻支持一組固定的x值,它們具有「一個接一個」的定義。我需要能夠設置任意x值。 @LLai使用Highcharts提供了一個解決方案。 – Aydo