javascript - 在 Chart.js 中使用数组作为数据
问题描述
我想将数组的值传递给 Chart.js 数据,但它没有显示出来。数组中的值来自 JSON 对象
function addData(data){
console.log(data.burger_sales)
console.log(data.burger_sales["Krabby Pattie"])
console.log(data.burger_sales["Krusty Combo"])
console.log(data.burger_sales["Krusty Deluxe"])
burger_sales = data
console.log(burger_sales)
KrabbyPattie = burger_sales.burger_sales['Krabby Pattie']
myArray = [burger_sales.burger_sales['Krabby Pattie'],
burger_sales.burger_sales['Krusty Combo'] ,
burger_sales.burger_sales['Krusty Deluxe']]
console.log(myArray)
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:['Krabby Pattie', 'Krusty Combo', 'Krusty Deluxe'],
datasets: [{
label: 'Burger Sales',
data: myArray
这是 myArray (3) [901, 230, 369] 0: 901 1: 230 2: 369 长度: 3 proto : Array(0)的 console.log
解决方案
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
//your simple array
var arr = [65, 59, 80];
// Get the context of the canvas element we want to select
var data = {
labels: ['Krabby Pattie', 'Krusty Combo', 'Krusty Deluxe'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data:arr
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0, 0, 0, .05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//String - A legend template
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
});;
</script>
</body>
</html>
推荐阅读
- python - .map 删除我的列中未在映射中指定的值
- excel - 复制粘贴每 10 个单元格范围 *10 次到一列
- python - 使用 while 循环遍历一系列以将字符添加到字符串。循环永远不会在完整数据上中断。我能做些什么?
- r - Dplyr 非标准评估——需要帮助
- php - Laravel 5.7 错误 404 处理页面位置
- javascript - 如何将像“2018911”这样的字符串格式化为日期?
- android - 我怎样才能有一个带有进度条更新的排球请求链
- nightwatch.js - 一次超时失败后,守夜测试不继续
- javascript - fetch、ajax 和 xhr 之间的区别
- libgdx - 在没有 AndroidApplication 的情况下使用 LibGdx?