如何更改Y轴以上，低于零的值？ Chart.js 2.6

Question

使用chart.js 2.6有没有办法动态更改图表中的条形图，使其高于零且零以下？ 通过调用方法生成图形序列数据。 现在它只是一个随机数生成器，但将是一个数据库调用。

function changeWOWData(chart) {
    var datasets = chart.data.datasets;
    var labelLen = chart.data.labels.length;
    if (datasets[0]) {
        for (i = 0, len = datasets.length; i < len; i++) {
            try {
                for (j = 0, len = labelLen; j < len; j++) {
                    datasets[i].data[j] = getRandomInt(-100, 100);
                }

            } catch (e) {
                console.log(e.message);
            }
        }
    }
}

图表看起来像这样：

我希望零以上的图表栏为蓝色，零以下的栏为红色。

任何/所有回复都表示赞赏。 提前致谢！

格里夫

**编辑**添加以下答案中的代码：

var myBarChart = new Chart(wowChart, {
    type: 'bar',
    data: wowData,
    plugins: [{
        beforeDraw: function (c) {
            var data = c.data.datasets[0].data;
            for (var i in data) {
                try {
                    var bar = c.data.datasets[0]._meta[0].data[i]._model;
                    if (data[i] > 0) {
                        bar.backgroundColor = '#07C';
                    } else bar.backgroundColor = '#E82020';

                } catch (ex) {
                    console.log(ex.message);
                }
                console.log(data[i]);
            }
        }
    }],
    options: wowOptions
});

控制台的每隔一行我都会看到数据元素以及异常

Answer 1

您可以使用以下图表插件完成此操作：

plugins: [{
   beforeDraw: function(c) {
      var data = c.data.datasets[0].data;
      for (let i in data) {
         let bar = c.data.datasets[0]._meta['0'].data[i]._model;
         if (data[i] > 0) {
            bar.backgroundColor = '#07C';
         } else bar.backgroundColor = '#E82020';
      }
   }
}]

^{添加此项后跟图表选项}

ᴅᴇᴍᴏ

 var ctx = document.getElementById("canvas").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [{ label: 'LEGEND', data: [9, 14, -4, 15, -8, 10] }] }, options: {}, plugins: [{ beforeDraw: function(c) { var data = c.data.datasets[0].data; for (let i in data) { let bar = c.data.datasets[0]._meta['0'].data[i]._model; if (data[i] > 0) { bar.backgroundColor = '#07C'; } else bar.backgroundColor = '#E82020'; } } }] }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="canvas" height="180"></canvas>