当前位置：首页 > 行业动态 > 正文

如何在Chart.js中自定义柱状图的颜色？

admin
行业动态
2024-12-14
3989

Chart.js柱状图颜色设置

如何在Chart.js中自定义柱状图的颜色？第1张

简介

Chart.js是一个开源的JavaScript库，用于在网页上创建各种类型的图表，它支持多种图表类型，如折线图、柱状图、饼图等，并且提供了丰富的自定义选项，让开发者可以轻松地创建和美化图表。

基础柱状图的创建

在修改柱状图颜色之前，我们需要先了解如何创建一个基础的柱状图，以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="200"></canvas>
  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    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(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

修改柱状图颜色

自定义单个柱状图颜色

你可以为每个柱状图单独指定颜色，只需要将backgroundColor和borderColor属性设置为一个颜色数组即可：

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)'
]

使用渐变色

为了让柱状图更加美观，可以使用渐变色，以下是一个使用Canvas渐变色的例子：

var ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(255, 99, 132, 0.2)');
gradient.addColorStop(1, 'rgba(54, 162, 235, 0.2)');
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: gradient,
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

动态改变颜色

你可能需要根据某些条件动态改变柱状图的颜色，根据数据值大小来设置不同的颜色：

var data = [12, 19, 3, 5, 2, 3];
var backgroundColors = data.map(value => {
  return value > 10 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(54, 162, 235, 0.2)';
});
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: data,
      backgroundColor: backgroundColors,
      borderColor: backgroundColors.map(color => color.replace('0.2', '1')),
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

堆叠柱状图点击更换背景色以及加虚线边框

在柱状体click之后，当前堆叠柱状体更换背景颜色，以及添加虚线边框，然后点击其他的堆叠柱状图或者空白区域，原先的堆叠柱状图还要更新到原先的背景颜色，解决方案如下：

<!DOCTYPE html>  
<script type="text/javascript" src="Chart.js"></script>
</head>  
<body>  
<canvas id="myChart" width="500px" height="400px"></canvas>  
<script>  
var ctx = document.getElementById("myChart").getContext('2d');   
Chart.defaults.derivedBubble = Chart.defaults.bar;   
// I think the recommend using Chart.controllers.bubble.extend({ extensions here });   
var custom = Chart.controllers.bar.extend({   
draw: function(ease) {   
// Call super method first   
Chart.controllers.bar.prototype.draw.call(this, ease);   
   
// Now we can do some custom drawing for this dataset. Here we'll draw a red box around the first point in each dataset   
var meta = this.getMeta();   
var pt0 = meta.data[0];   
   
//Only click the bar will draw the dash border   
if (lastClickBarArrayStyle.index != null) {   
var pt0 = meta.data[lastClickBarArrayStyle.index];   
var ctx = this.chart.chart.ctx;   
ctx.save();   
   
//The top bar need to draw the top border.   
if (pt0._model.datasetLabel == this.chart.data.datasets[this.chart.data.datasets.length 1].label) {   
ctx.moveTo(pt0._view.x pt0._view.width/2, pt0._view.y);   
ctx.lineTo(pt0._view.x + pt0._view.width/2, pt0._view.y);   
}   
   
//All bar need to draw the right border.   
ctx.moveTo(pt0._view.x + pt0._view.width/2, pt0._view.y);   
ctx.lineTo(pt0._view.x + pt0._view.width/2, pt0._view.base);   
   
//The bottom bar need to draw the bottom border.   
if (pt0._model.datasetLabel == this.chart.data.datasets[0].label) {   
ctx.moveTo(pt0._view.x + pt0._view.width/2, pt0._view.base);   
ctx.lineTo(pt0._view.x pt0._view.width/2, pt0._view.base);   
}   
   
//All bar need to draw the left border.   
ctx.moveTo(pt0._view.x pt0._view.width/2, pt0._view.base);   
ctx.lineTo(pt0._view.x pt0._view.width/2, pt0._view.y);   
   
}   
}   
});   
var lastClickBarArrayStyle = {};   
var myBarChart = new custom({   
type: 'bar',   
data: {   
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],   
datasets: [{   
label: 'My First dataset',   
backgroundColor: 'rgba(255,99,132,0.2)',   
borderColor: 'rgba(255,99,132,1)',   
data: [65, 59, 80, 81, 56, 55, 40],   
fill: false,   
}, {   
label: 'My Second dataset',   
backgroundColor: 'rgba(54, 162, 235, 0.2)',   
borderColor: 'rgba(54, 162, 235, 1)',   
data: [28, 48, 40, 19, 86, 27, 90],   
fill: false,   
}]   
},   
options: {   
responsive: true,   
maintainAspectRatio: false,   
scales: {      
yAxes: [{      
ticks: {beginAtZero: true}      
}]      
}   
}   
});   
document.getElementById("myChart").onclick = function(evt){   
var activePoints = myBarChart.getElementsAtEvent(evt);   
if (activePoints.length > 0){   
var firstPoint = activePoints[0];   
var label = myBarChart.data.labels[firstPoint._index];   
var value = myBarChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];   
alert('You clicked on ' + label + ' with value ' + value);   
}   
};   
</script>  
</body>  
</html>

小伙伴们，上文介绍了“chartjs柱状颜色”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。