获取一组对象并将其放入条形图中答案

【问题标题】：take an array of objects and put it in a bar graph获取一组对象并将其放入条形图中
【发布时间】：2016-12-24 01:10:55
【问题描述】：

我是 jquery 和 javascript 方面的新手，但我正在尝试慢慢学习。我的问题是，如果我有一个看起来像这样的 json 文件

   var data=  [{"tasknumber":304030,
   "date":"2012-05-05",
   "operator":"john doe"},
  {"tasknumber":23130,
   "date":"2012-07-07",
   "operator":"john doeeeeeeee"},
   {"tasknumber":233330,
   "date":"2012-08-08",
   "operator":"john doe"}]

我从下划线库中应用了 .countBy 来得到一个看起来像这样的数组

{"john doe":2,"john doeeeeeeee":1}

所以对于下一部分，我使用我在网上找到的示例 jquery 图形大纲

<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title:{
            text: "My First Chart in CanvasJS"              
        },
        data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            type: "column",
            dataPoints: [
                { label: "apple",  y: 10  },
                { label: "orange", y: 15  },
                { label: "banana", y: 25  },
                { label: "mango",  y: 30  },
                { label: "grape",  y: 28  }
            ]
        }
        ]
    });
    chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

我尝试了几种方法在这部分代码中调用我的新数组

data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            type: "column",
            dataPoints: [
                //insert here
            ]
        }
        ]

但是当我尝试打开它时，我只会得到空白屏幕并且未定义。有人对我如何在数据点中调用我的数组有任何指导吗？

我的数据在另一个名为 task.json 的文件中，我必须使用它来调用它

var input=require('./task.json');
const _ = require(`underscore`);
var names=_.countBy(input,'operator');

【问题讨论】：

您想在数据点中调用哪个数组？ names?
在 CanvasJS.chart 函数之外声明一个新变量（比如 dps）作为数组。用要在图表上显示的数据填充该数组。数据应按照 CanvasJS 库中的说明采用适当的格式。然后，将该 var (dps) 分配给 CanvasJS.chart 函数内的 dataPoints。（例如：数据点：dps）。
是的，我想在我的数据点中调用名称

标签： javascript jquery arrays underscore.js

【解决方案1】：

假设您的 JSON 对象存储在某个变量中（例如：myObject）。

var myObject = {"john doe":2,"john doeeeeeeee":1};

声明一个变量来存储 JSON 中的数据点并将数据点推送到数组中。

var dps = [];
for(var element in myObject) {
    dps.push({label: element, y: myObject[element]});
}

完成此操作后，将此变量 (dps) 分配给 CanvasJS 图表的 dataPoints。

data: [
    type: "column",
    dataPoints: dps
]

您可以在 fiddle 中看到一个工作示例。

【讨论】：