[英]Using array as data in 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)的console.log [901,230,369] 0:901 1:230 2:369长度:3 proto :Array(0)
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.