Question

我正在使用chart.js我想动态更新条形图的标签我在javascript中有一个数组，它从ajax获取值现在问题是我想传递标签中数组的每个元素

   labels: [array[0],array[1],array[2],array[3],array[4]],

这就是我在做什么我硬编码数组的每个元素但这不是我想要的我想要动态显示数组的每个元素。我正在考虑采用数组的长度，然后遍历数组直到它的长度，但问题再次是标签道具。 chart.js的内容并不允许我在其中编写JavaScript代码....请帮助我

这是我的代码

         var label_values=$('.labels').text();
         //label_values has this string 
           "09:00:0010:00:0011:00:0012:00:0013:00:00"
         var array=[];
         array = label_values.match(/(\d+:){2}\d\d/g);
         var canavas=jQuery('<canvas id="myChart" style="width: 75%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 70px; bottom: 0px";></canvas>');
         canavas.appendTo(overlay_body);
         var ctx = document.getElementById("myChart");
       var myChart = new Chart(ctx, {
       type: 'horizontalBar',
        data: {
    labels: [array[0],array[1],array[2],array[3],array[4]],
    datasets: [{
        label: 'Hourly Attendance',
        data: [12, 19, 3, 5, 2],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            ticks: {
                max:60,
                min:0,
                step:10,
                beginAtZero:true
            }
        }],


       }
   }
  });
      }// end 2nd ajx
    });
      }
    });

Answer 1

labels属性接受array，因此您只需传递整个数组

即可

labels: array

在char.js的标签中传递数组的每个元素

1 个答案: