如何更改 Y 轴上高于、低于零的值的颜色？ Chart.js 2.6答案

【问题标题】：How do I change the colors on Y-Axis for values above, below zero? Chart.js 2.6如何更改 Y 轴上高于、低于零的值的颜色？ Chart.js 2.6
【发布时间】：2017-06-16 15:33:27
【问题描述】：

使用 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
});

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

【问题讨论】：

标签： javascript charts drawing chart.js2

【解决方案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>

【讨论】：

没有问题，你回答了这个问题，示例中的代码运行，这正是我想要做的事情。惊人的！但我在这一行得到 TypeError： var bar = c.data.datasets[0]._meta[0].data[i]._model;我认为这可能与回调有关。如果我将代码包装在 try catch 块中并添加一个 console.log 文件，它会在每个数据项之间打印错误消息。
嗯..你是怎么得到类型错误的？仔细检查您的代码是否有任何拼写错误。如您所见，代码在 sn-p 上完美运行，它也应该适用于您而不会引发任何错误。
g aand，请在编辑中查看我的完整代码。你能看出它有什么问题吗？
奇怪。我想知道还会发生什么。 JSFidlle 中的代码会引发异常，如上面的编辑所示，并且不会对条形图着色。真可惜。感谢您的帮助。
实际上，您无法获得_meta[0]，因为它是一个具有单个属性（一些随机数）的对象，因此您需要从键中获取它：var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model（请参阅@IrishDubGuy 的评论来自@ 987654321@)

【解决方案2】：

在 chartjs v3 中，您可以使用 Simply scriptable 选项示例：

    datasets: [
          {
            data: this.chartData,
            backgroundColor(context) {
              const index = context.dataIndex
              const value = context.dataset.data[index]
              return value < 0 ? 'red' : 'blue'
            }
          }
        ]

访问https://www.chartjs.org/docs/latest/general/options.html#scriptable-options

【讨论】：