尝试从chart.js访问条形时.datasets未定义

Question

我正在尝试重新创建此示例：

chart.js bar chart color change based on value

使用以下代码

  <script src="/chart.js/dist/Chart.js"></script>
   <canvas id="myChart" width="400" height="400"></canvas>
   <script>
       var ctx = document.getElementById('myChart').getContext('2d');
       window.myChart = new Chart(ctx, {
           type: 'bar',
           data: {
               labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
               datasets: [{
                   label: '# of Votes',
                   data: [12, 19, 3, 5, 3, 3],
                   fillColor: "rgba(220,220,220,0.5)",
                   strokeColor: "rgba(220,220,220,0.8)",
                   highlightFill: "rgba(220,220,220,0.75)",
                   highlightStroke: "rgba(220,220,220,1)",
                   borderWidth: 1
               }]
           },
       });
       var bars = myChart.datasets[0].bars;
       for (i = 0; i < bars.length; i++) {
           var color = "green";
           //You can check for bars[i].value and put your conditions here
           if (bars[i].value < 3) {
               color = "red";
           } else if (bars[i].value < 5) {
               color = "orange"

           } else if (bars[i].value < 8) {
               color = "yellow"
           } else {
               color = "green"
           }
           bars[i].fillColor = color;
       }
       myChart.update();

   </script>

但是我在控制台中遇到TypeError：

  

myChart.datasets在行上未定义var bars = myChart.datasets [0] .bars;

您知道我正在忽略什么吗？

谢谢

Answer 1

您的数据集为空，未按照引用的示例进行操作

作为您提到的示例的正确方法是：

var barChartData = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
        {
            label: '# of Votes',
                   data: [12, 19, 3, 5, 3, 3],
                   fillColor: "rgba(220,220,220,0.5)",
                   strokeColor: "rgba(220,220,220,0.8)",
                   highlightFill: "rgba(220,220,220,0.75)",
                   highlightStroke: "rgba(220,220,220,1)",
                   borderWidth: 1
        }
    ]
};

var ctx = document.getElementById('myChart').getContext('2d');
       window.myObjBar = new Chart(ctx).Bar(barChartData, {
          responsive : true
    });
       var bars = myObjBar.datasets[0].bars;
    for(i=0;i<bars.length;i++){
       var color="green";
       //You can check for bars[i].value and put your conditions here
       if(bars[i].value<3){
        color="red";
       }
       else if(bars[i].value<5){
        color="orange"

       }
       else if(bars[i].value<8){
        color="yellow"
       }
       else{
        color="green"
       }

       bars[i].fillColor = color;

    }
    myObjBar.update(); //update the cahrt

Here是工作示例：）

Answer 2

这是您想要的完整示例。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
  
	//Creating a barchart with default values
	var myChart = new Chart(document.getElementById("myChart"), {
	"type": "bar",
	"data": {
		"labels": ["January", "February", "March", "April", "May", "June", "July"],
		"datasets": [{
			"label": "My First Dataset",
			"data": [65, 59, 80, 81, 56, 55, 40],
			"fill": false,
			"backgroundColor": ["#fb4d4d", "#fb9d4d", "#f8fb4d", "#98fb4d", "#4effee", "#4cb9f8", "#574cf8"],
			"borderColor": ["#fb4d4d", "#fb9d4d", "#f8fb4d", "#98fb4d", "#4effee", "#4cb9f8", "#574cf8"],
			"borderWidth": 1
		}]
	},
	"options": {
		"scales": {
			"yAxes": [{
				"ticks": {
					"beginAtZero": true
				}
			}]
		}
	}
	});
  
   //Getting the bar-chart existing values	  
   var bars = myChart.config.data.datasets[0];
   var data = bars.data;
   
   //Updating the existing value (object which holds value) 
   for (i = 0; i < data.length; i++) {
		var bgcolor = "";
		var brcolor = "";
	   
	   if (data[i] < 30) {
			bgcolor = "red";
			brcolor = "red";
	   } else if (data[i] < 50) {
			bgcolor = "orange";
			brcolor = "orange";
	   } else if (data[i] < 80) {
			bgcolor = "yellow";
			brcolor = "yellow";
	   } else {
			bgcolor = "green";
			brcolor = "green";
	   }
	   
	   bars.backgroundColor[i] = bgcolor;
	   bars.borderColor[i] = brcolor;
   }
   
   //Triggering the chart update in 3 seconds.
   setTimeout(function(){
	myChart.update();
   }, 3000);
   
</script>