在Chart.js中将数组用作数据

Question

I want to pass the values of an array to Chart.js data, but it doesn't show up. 我想将数组的值传递给Chart.js数据，但是没有显示出来。 The values from the array came from a JSON object 数组中的值来自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

Here is the console.log of myArray (3) [901, 230, 369] 0: 901 1: 230 2: 369 length: 3 proto : Array(0) 这是myArray（3）的console.log [901，230，369] 0：901 1：230 2：369长度：3 proto ：Array（0）

Answer 1


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

在Chart.js中将数组用作数据

问题描述

1 个解决方案

解决方案1
0 2019-06-28 10:35:31

在Chart.js中将数组用作数据

问题描述

1 个解决方案

解决方案1 0 2019-06-28 10:35:31

解决方案1
0 2019-06-28 10:35:31