は、どのように私は、オブジェクト

Question

の配列にデータを渡すことができ、ここで私はこのようなデータ、

var dataArray = '[{"name":"books","value":43},{"name":"DVDs","value":99},{"name":"Magazines","value":37},{"name":"eBooks","value":88},{"name":"Other awesome things","value":67}]'; 

私は動的にこのデータを使用してこのchartを構築したいが、私のjsonから来る実際のプロジェクトに大きくなることを意味します持っていますdatabase。ここ

は私の希望chart（動的に私の場合のために）のためにjsfiddleです：http://jsfiddle.net/artefactory/m4on9L4p/

//canvasJS example - doughnut chart showing collection breakdown. 
 

 
var dataArray = '[{"name":"books","value":43},{"name":"DVDs","value":99},{"name":"Magazines","value":37},{"name":"eBooks","value":88},{"name":"Other awesome things","value":67}]'; 
 

 
window.onload = function() { 
 
    var chart = new CanvasJS.Chart("chartContainer", 
 
    { 
 
     title:{ 
 
     text: "What's in our collection" 
 
     }, 
 
     data: [ 
 
     { 
 
     type: "doughnut", 
 
     // how to substitute above array here 
 
     dataPoints: [ 
 
     { y: 53.37, indexLabel: "Books" }, 
 
     { y: 35.0, indexLabel: "DVDs" }, 
 
     { y: 7, indexLabel: "Magazines" }, 
 
     { y: 2, indexLabel: "eBooks" }, 
 
     { y: 5, indexLabel: "Other awesome things" } 
 
     ] 
 
    } 
 
    ] 
 
    }); 
 

 
    chart.render(); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.4.1/canvas.min.js"></script> 
 
<div id="chartContainer" style="height: 300px; width: 100%;"> </div>

私は私のJSONと動的この

dataPoints: [ 
      { y: 53.37, indexLabel: "Books" }, 
      { y: 35.0, indexLabel: "DVDs" }, 
      { y: 7, indexLabel: "Magazines" }, 
      { y: 2, indexLabel: "eBooks" }, 
      { y: 5, indexLabel: "Other awesome things" } 
      ] 

を構築したいです。どうすればいい？

質問：hardcodedの値を使用する代わりに私はjsonを使用してグラフを作成しますか？

Answer 1

JSON.parse()とArray.prototype.map()機能を使用してソリューション：

... 
dataPoints: JSON.parse(dataArray).map(function (o) { 
    return {y: o.value, indexLabel: o.name}; 
}) 
... 

Answer 2

値53.37,35.0はどのように導き出されますか？それらの導出のための数式がありますか？

「名前」をindexLabelに、「値」をxにマッピングするだけであれば、このコードは機能するはずです。

var desiredObj = x.map(function(currentElement) {return {x: currentElement.value, indexLabel: currentElement.name}}); 

Answer 3

あなたはこのようにjQueryのMAOP機能を使用することができます：あなたは男を求めているものを

var myNewDataArray = $.map(dataArray,function(a,b){ 
    return { 
     y : a.value, 
     indexLabel : a.name 
    } 
});