如何将数据传递到对象数组中

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>

我希望能够建立这个。

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" }
           ]

我想用json来动态构建图表，该如何实现？

问题：我想使用json而不是硬编码的值来构建图表？

- user5405873

Answer 1

使用 JSON.parse() 和 Array.prototype.map() 函数的解决方案：

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

- RomanPerekhrest

Answer 2

53.37和35.0的值是如何得出的？它们的推导是否有数学公式？

如果你只是将“名称”映射到indexLabel，将“值”映射到x，那么这段代码应该可以工作。

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

- Dinesh Verma

---

哈哈，@Dinesh Verma，你在问什么啊，我只是想把 dataPoints:[] 替换成我的 json。 - user5405873

Answer 3

您可以使用jQuery的map函数，如下所示：

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

- Alex C