javascript - 如何改变图表js中的列的颜色

Question

链接代码笔:https://codepen.io/01202581905/pen/gOOYzOZ

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, -10, 35, 2, -19, 30, 15]
    }]
  },

  // Configuration options go here
  options: {}
});

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37545f564543195d447705190f1907" rel="noreferrer noopener nofollow">[email protected]</a>"></script>

我想在列值为 0 时更改列的颜色并更改 col 的位置。谢谢

我想要的结果:

Answer 1

我希望我已经解决了旅行问题:

function updateChart(chart){
    let val = 2;
    let updatedValues = [];
    chart.data.datasets[0].data.forEach((e,i)=>{
    if(e===0){
      updatedValues.push('green');
      chart.data.datasets[0].data[i] = val;
      chart.data.datasets.push({data:
        Array.from({length:chart.data.datasets[0].data.length},function(el,j){
            if(i===j) return -val
        })})
    } else {
        updatedValues.push(chart.data.datasets[0].backgroundColor)
    }

  })
  chart.data.datasets.forEach(e=>{
    e.backgroundColor = updatedValues;
  })

  chart.update()
}

并进行测试:https://jsfiddle.net/7Lbjmw6r/