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

Question

我是 jquery 和 javascript 的新手，但我正在尝试学习 slowly.What 我的问题是，如果我有一个 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
            ]
        }
        ]

但是当我尝试打开时我只得到空白屏幕和未定义it.does有人对我有任何关于如何在数据点内调用我的数组的指导吗？

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

来调用它

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

Answer 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 中看到一个工作示例。

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

take an array of objects and put it in a bar graph

javascript

arrays

jquery

underscore.js