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

Question

I'm trying to recreate this example:

chart.js bar chart color change based on value

With the following code

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

but I get in console the TypeError:

myChart.datasets is undefined on the line var bars = myChart.datasets[0].bars;

Do you have an idea what I'm overlooking?

Thank you

Answer 1

your dataset was empty, was not being done as the example quoted

The correct way to do as the example you mentioned is:

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 is an example working :)

Answer 2

Here is the complete example you want.

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