Chart.js 改变柱状图颜色

Question

Chart.js 改变柱状图颜色

11

我正在使用chart.js来可视化一个排序算法。到目前为止，我已经成功地实现了它。现在，我想改变图表中单个条形的颜色，但我无法弄清楚如何实现。

有一个帖子应该可以回答我的问题，但这个解决方案对我不起作用。

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
}

JavaScript

$(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
                  }
              }]
          }
      }
  });




});

- NecNator

2个回答

7

我已经根据你的代码创建了一个fiddle。首先点击Elements按钮以填充数据。当点击Sort按钮时，我改变了一条线的颜色。

请查看Fiddle。

- Aneesh Sivaraman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mayank Pandeyz · Accepted Answer

试试这个：

<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>

如官网文档所述：