[英]how can i pass data into array of object
我这里有这样的数据,
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
来构建图形而不是使用hardcoded
值?
使用JSON.parse()
和Array.prototype.map()
函数的解决方案:
...
dataPoints: JSON.parse(dataArray).map(function (o) {
return {y: o.value, indexLabel: o.name};
})
...
值 53.37、35.0 是如何导出的? 它们的推导是否有数学公式?
如果您只是将“名称”映射到 indexLabel 并将“值”映射到 x,那么这段代码应该可以工作。
var desiredObj = x.map(function(currentElement) {return {x: currentElement.value, indexLabel: currentElement.name}});
您可以像这样使用 jQuery map
功能:
var myNewDataArray = $.map(dataArray,function(a,b){
return {
y : a.value,
indexLabel : a.name
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.