2015-04-02 53 views
0

新來這裏C3。我正在試圖做一個簡單的散點圖。我認爲這會工作(c3_test.csv是相同的數據,從樣本集。)c3.js散點圖例子,TSV文件

var chart = c3.generate({ 
     data: { 
      url: 'c3_test.csv',  
     x: 'data1', 
     columns: ['data2'] 
     type: 'scatter' 
     } 
    }); 

,但看起來這是不是要走的路。這工作,

var chart = c3.generate({ 
     data: { 
      url: 'c3_test.csv',  
      filter: function (d) { 
       return d.id !== 'data1'; 
      }, 
      x:'data2', 
      type: 'scatter' 
     }, 

然而,這將有助於瞭解如何使第一種方法也得到所需要的輸出。 另外,我想加載一個tsv文件;基於this,我想我可以只使用url接口,但是,這似乎並沒有工作。再次感謝您的幫助。我正在使用https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js。我的csv(tsv)文件如下。

TIA, 
C.S.N 

data1,data2,data3 
20,180,400 
40,150,310 
70,120,470 
50,170,400 
80 200 380 

回答

0

如果您正在尋找使用data1爲x軸,data2爲Y,而忽略data3,您可以使用此:

var chart = c3.generate({ 
    data: { 
     url: 'c3_test.csv', 
     x: 'data1', 
     type: 'scatter', 
     hide: ['data3'] 
    }, 
    legend: { 
     hide: ['data3'] 
    } 
}); 

一點玩耍後我周圍沒能得到一個TSV文件加載使用url選項要麼,但你可以使用基地D3解析TSV和飼料它圖表對象。

1

可以從現在TSV文件負荷。爲了做到這一點,你需要的MIME類型屬性添加到數據對象TSV

下面是一個例子:

function glucoseInit() { 
    var chart = bb.generate({ 
     bindto: '#divGlucoseScores', 
     data: { 
      url: 'glucoseScores.tsv', 
      mimeType: 'tsv', 
      x: 'date', 
      xFormat: '%Y-%m-%d %H:%M:%S', // how the date is parsed 
      y: 'score', 
      names: { 
       date: 'Date', 
       score: 'Blood glucose (mg/dL)' 
      } 
     }, 
     axis: { 
      x: { 
       type: 'timeseries', 
       tick: { 
        format: '%m/%d/%Y' 
       } 
      } 
     } 
    }); 
} 

this post GitHub上。看起來這是在9月份新增的2014