Chart.js改變條的顏色

我使用chart.js來可視化排序算法。到目前爲止，我沒有實現它的問題。現在我想更改圖表中單個條的顏色，但我無法弄清楚如何去做。Chart.js改變條的顏色

有一個post這應該回答我的問題，但是這種解決方案不適合我。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="jquery-3.0.0.js"></script> 
    <script src="script.js"></script> 
    <script src="jquery-ui.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script> 
    <link rel="stylesheet" href="stylesheet.css"> 
    <link rel="stylesheet" href="jquery-ui.css"> 

    <title>Shell Sort</title> 
    </head> 
    <body> 
    <button class='button' id='fillChart'>Elements</button> 
    <button class='button' id='sort'>Sort</button> 
    <canvas height='75' width='300' id='barChart'></canvas> 
    </body> 
</html>

CSS

body{ 
    background-color:#F8FBEF; 
} 
.button { 
    position: relative; 
    background-color: #1C1C1C; 
    border: none; 
    font-size: 28px; 
    color: #FFFFFF; 
    padding: 20px; 
    width: 200px; 
    text-align: center; 
    -webkit-transition-duration: 0.4s; /* Safari */ 
    transition-duration: 0.4s; 
    text-decoration: none; 
    overflow: hidden; 
    cursor: pointer; 
} 

.button:after { 
    content: ""; 
    background: #f1f1f1; 
    display: block; 
    position: absolute; 
    padding-top: 300%; 
    padding-left: 350%; 
    margin-left: -20px !important; 
    margin-top: -120%; 
    opacity: 0; 
    transition: all 0.8s 
} 

.button:active:after { 
    padding: 0; 
    margin: 0; 
    opacity: 1; 
    transition: 0s 
}

$(document).ready(function(){ 

    var numbers = []; 

//########################---Array Of Random Numbers----######################## 
    function createNumbers(){ 
    numbers = []; 
    for(var i = 0; i < 6; i++){ 
     var random = Math.floor((Math.random() * 100) + 1); 
     numbers.push(random); 
    } 
    }; 

    //########################---Fill Chart With Array----######################## 
    $('#fillChart').click(function(){ 
    barChart.data.datasets[0].backgroundColor = "rgba(192,192,192,1)"; 
    createNumbers(); 
    console.log('Not Sorted:'); 
    for(var i = 0; i < numbers.length; i++){ 
     console.log(numbers[i]); 
    } 
    fillData() 
    barChart.update(); 
    }); 

    //########################---Fill Data With Array----######################## 
    function fillData(){ 
    for(var i = 0; i < numbers.length; i++){ 
     barChart.data.datasets[0].data[i] = numbers[i]; 
     console.log('Data:' + barChart.data.datasets[0].data[i]); 
    } 
    } 

//##############################---Sort Array----############################### 
    $('#sort').click(function(){ 
     shellSort(numbers); 
     console.log('Sorted'); 
     for(var i = 0; i < numbers.length; i++){ 
     console.log(numbers[i]); 
     } 
     fillData(); 
     barChart.datasets[0].bars[0].backgroundColor = "rgba(000,111,111,55)"; 
     barChart.update(); 
    }); 

    //##############################---shellSort----############################## 
    function shellSort (a) { 
    for (var h = a.length; h = parseInt(h/2);) { 
     for (var i = h; i < a.length; i++) { 
      var k = a[i]; 
      for (var j = i; j >= h && k < a[j - h]; j -= h) 
       a[j] = a[j - h]; 
      a[j] = k; 
     } 
    } 
    return a; 
} 

    //##############################---Bar Chart----############################## 
    var ctx = $('#barChart'); 
    var barChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: ["Element 1", "Element 2", "Element 3", "Elemenmt 4", "Element 5"], 
      datasets: [{ 
       label: 'Sort', 
       data: [0,0,0,0,0], 
       backgroundColor: [], 
       borderColor: [], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      } 
     } 
    }); 




});

來源

2016-08-03 NecNator

我已經根據您的代碼創建了一個小提琴。首先點擊元素按鈕來填充數據。當點擊Sort按鈕時，我改變了酒吧的顏色。

請檢查Fiddle

來源

2016-08-03 13:20:16

非常感謝你！這正是我想要的:) – NecNator

試試這個：

<canvas id="myChart" width="400" height="400"></canvas> 
<script> 
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [12, 19, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 
</script>

如上所述Documentation

來源

2016-08-03 12:21:42

嘿Mayank，謝謝你的回答。但是這怎麼適用於我的問題呢？ – NecNator

backgroundColor：[ 'rgba（255,99,132,0.2）'， 'rgba（54,162,235,0.2）'， ] 這些用於每個條的顏色對比色代碼的差異集合。所以你可以相應改變 –

也許我應該對我的問題更具體。我不想知道如何「硬編碼」顏色，我想知道如何在某個事件後改變顏色。我想如果你看看我提到的這篇文章，你可以更好地瞭解我的意思。 – NecNator

Chart.js改變條的顏色

回答

相關問題