图表区域背景色chartjs [英] Chart area background color chartjs

问题描述

我的图表 js 有问题，我想为上图的图表区域着色

I have problem with chart js, i want to coloring chart area like image above

我尝试从 charJs Docs 中查找配置，但没有匹配.是否可以更改图表区域的背景颜色?如果可能，有人可以帮助我吗?

I try to find configuration from charJs Docs , but nothing matched. its possible or not to change chart area background color? if possible anyone can help me?

HTML

<canvas id="barChart" width="600" height="300"></canvas>

Javascript

var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx,{
  type: 'bar',
  data: {
    labels:["Label1","Label2","Label3","Label4"],
    borderColor : "#fffff",
    datasets: [
      {
        data: ["2","3","1","4"],
        borderColor : "#fff",
        borderWidth : "3",
        hoverBorderColor : "#000",
        backgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5" 
        ],
        hoverBackgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5"
        ]
      }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks:{
          min : 0,
          stepSize : 1,
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#000",
          lineWidth:2,
          zeroLineColor :"#000",
          zeroLineWidth : 2
        },
        stacked: true
      }],
      xAxes: [{
        ticks:{
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#fff",
          lineWidth:2
        }
      }]
    },
    responsive:false
  }
});

这是我当前的代码 jsFiddle

所以每个人都可以尝试找到解决方案.感谢您的帮助.

so everyone can try for find solution. thanks for your help.

推荐答案

没有内置的方法来改变背景颜色，但你可以使用 CSS.JSFiddle.

There is no built-in method to change background color, but you can use CSS. JSFiddle.

ctx.style.backgroundColor = 'rgba(255,0,0,255)';

编辑

如果您想填充图表的精确区域而不是整个 div，您可以编写自己的 chart.js 插件.在 JSFiddle 上试试.

If you want to fill exact area of chart and no whole div, you can write your own chart.js plugin. Try it on JSFiddle.

        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    var ctx = chart.chart.ctx;
                    var chartArea = chart.chartArea;

                    ctx.save();
                    ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
                    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                    ctx.restore();
                }
            }
        });

        var config = {
  type: 'bar',
  data: {
    labels:["Label1","Label2","Label3","Label4"],
    borderColor : "#fffff",
    datasets: [
      {
        data: ["2","3","1","4"],
        borderColor : "#fff",
        borderWidth : "3",
        hoverBorderColor : "#000",
        backgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5" 
        ],
        hoverBackgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5"
        ]
      }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks:{
          min : 0,
          stepSize : 1,
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#000",
          lineWidth:2,
          zeroLineColor :"#000",
          zeroLineWidth : 2
        },
        stacked: true
      }],
      xAxes: [{
        ticks:{
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#fff",
          lineWidth:2
        }
      }]
    },
    responsive:false,
    chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
    }
  }
};

        var ctx = document.getElementById("barChart").getContext("2d");
        new Chart(ctx, config);

这篇关于图表区域背景色chartjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！