Javascript 获取一个对象数组并将其放入条形图中_Javascript_Jquery_Arrays_Underscore.js

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

javascript jquery arrays

Javascript 获取一个对象数组并将其放入条形图中,javascript,jquery,arrays,underscore.js,Javascript,Jquery,Arrays,Underscore.js,对于jquery和javascript，我是一个新手，但我正在慢慢学习 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-0

对于jquery和javascript，我是一个新手，但我正在慢慢学习

   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，得到一个如下所示的数组

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

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

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

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

<!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>

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

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

我的数据在另一个名为task.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"}]

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

比方说，JSON对象存储在某个变量中（例如：myObject）

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

声明一个变量来存储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"}]

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

完成此操作后，将此变量（dps）分配给CanvasJS图表的数据点

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

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

您可以在这里看到一个工作示例。

您希望在数据点内调用哪个数组<代码>名称？在CanvasJS.chart函数之外声明一个新变量（比如.dps）作为数组。用要在图形上显示的数据填充该数组。数据应采用CanvasJS库中指示的适当格式。然后，将该var（dps）分配给CanvasJS.chart函数中的数据点。（例如：数据点：dps）。是的，我想在我的数据点内叫名字

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