使用JSON將分類數據從SQL導入C3.js

我目前正在使用C3圖表在MVC中動態構建列圖。雖然我可以使用AJAX/JSON從數據庫中提取數據，但我只能使用C3的JSON屬性綁定Y軸座標，而不是X軸類別。使用JSON將分類數據從SQL導入C3.js

我想做的事：動態構建柱狀圖。例如，多年的學生的標記將被標定爲（第1年：50），（第2年：100）等等，第一部分（類別：年）將沿着X軸和數字部分（Marks）去Y軸。這種組合的數量是動態的，取決於用戶的需求（從數據庫中作爲兩列，帶有多行）。

問題我運行到：

中的鍵指定兩個不同的數據類型呈現非數字部分（類）作爲一個單獨的系列共有，這是我不想和甚至沒有工作。
無論我做什麼，X軸都帶有整數，具體取決於可見的列數。我想將其更改爲實際的類別名稱。

這是我正在做的事情。我把設計靈感來自丹尼爾的方法在這裏（https://groups.google.com/d/msg/c3js/RV1X18GZoGY/-p39m9Ngt-gJ）

$.ajax({ 
    url: <Method in Controller here>, 
    type: "POST", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify(parameters), 
    success: function (data) { 
      var myData = jQuery.parseJSON(data); 
      var testJson = $.map(myData, function (item) { 
       return { 
        Year: item.Year, 
        Marks: item.Marks 

       } 
      }); 

      var chart = c3.generate({ 
       bindto: '#chart', 
       size: { 
        width: 800 
       }, 
       data: { 
        json: testJson, 

        mimeType: 'json', 
        keys: { 
         value: ['Marks'] 
        }, 

       } 
      }); 
    } 
});

期待一些幫助。提前致謝！

編輯：我想要的數據看起來像這樣的結尾： Sample Chart

來源

2016-06-28 Nivedit Majumdar

你可以試試下面的代碼：

var jsonTest = [ 
        { year: 1, marks: 50 }, 
        { year: 2, marks: 70 }, 
        { year: 3, marks: 75 }, 
        { year: 4, marks: 45 }, 
       ]; 

// The variable name chart will automatically bind itself to an id = chart 
var chart = c3.generate({ 
    data: {     
     type : 'bar', 
     json: jsonTest, 
     keys: { 
      x: 'year', 
      value: ['marks'] 
     } 
    }, 
    size: { 
     width: 400, 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     } 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 
     } 
    } 
});

我得到以下輸出：

這裏是JSBin的例子：Bar Chart Example

來源

2016-06-29 06:03:04

使用JSON將分類數據從SQL導入C3.js

回答

相關問題