如何更改Y軸上的顏色以上的值，低於零？ Chart.js 2.6

使用chart.js 2.6是否有一種方法可以動態更改我的圖表中的柱狀圖，以獲取零以上和零以下的值？圖形系列數據是通過調用方法生成的。現在它只是一個隨機數生成器，但將是一個數據庫調用。如何更改Y軸上的顏色以上的值，低於零？ 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 
});

我看到的數據元素，不同之處

沿控制檯每隔一行

來源

2017-06-16 Griff

您可以使用以下圖表插件來完成該操作：

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>

來源

2017-06-16 16:03:29

你回答了這個問題毫無疑問，本例中的代碼運行，那就是確切的事情，我想要做的。真棒！但是我在這一行上得到TypeError：var bar = c.data.datasets [0] ._ meta [0] .data [i] ._ model;我認爲這可能與回調有關。如果我將代碼包裝在try catch塊中並添加一個console.log文件，它會在每個數據項之間打印錯誤消息。 – Griff

恩..如何得到類型錯誤？仔細檢查你的代碼是否有錯別字。正如你所看到的代碼在代碼片段上運行完美，它也應該爲你工作，而不會拋出任何錯誤。 –

g aand，請在編輯中查看我的完整代碼。你能看到它有什麼問題嗎？ – Griff

如何更改Y軸上的顏色以上的值，低於零？ Chart.js 2.6

回答

相關問題