ApexCharts Stacked Columns 系列的特定颜色

Question

我想在 Apex 图表堆叠列中显示数据，每个系列都有特定的颜色（将颜色更改为红色和绿色，用于产品 A 和产品 B）。默认 Apex 图表选择颜色。

我尝试通过添加颜色选项并设置 plotOptions,bar,distributed: true 来更改颜色。但是然后孔列颜色相同，堆叠数据没有分开。

$(document).ready(function() {
  var options = {
    chart: {
      height: 350,
      type: 'bar',
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0
        }
      }
    }],
    plotOptions: {
      bar: {
        horizontal: false,
      },
    },
    series: [{
      name: 'PRODUCT A',
      data: [44, 55, 41, 67, 22, 43]
    }, {
      name: 'PRODUCT B',
      data: [13, 23, 20, 8, 13, 27]
    }],
    xaxis: {
      type: 'datetime',
      categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
    },
    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    },
  }

  var chart = new ApexCharts(
    document.querySelector("#chart"),
    options
  );

  chart.render();

});

  .box {
  padding: 25px 25px;
  border-radius: 4px;
}

.columnbox {
  padding-right: 15px;
  main>.container {
    padding: 60px 15px 0;
  }
  .footer {
    background-color: #f5f5f5;
  }
  .footer>.container {
    padding-right: 15px;
    padding-left: 15px;
  }
  code {
    font-size: 80%;
  }
  .viewcontainer {
    border: 1px solid;
    padding: 12px 20px 15px;
    border-radius: 4px;
    margin-top: 100px;
    margin-bottom: 50px;
    max-width: 1500px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">

感谢帮助！

Answer 1

在选项中设置颜色：

var options = {
  colors : ['#b84644', '#4576b5'],
  chart: {
.......

$(document).ready(function() {
  var options = {
    colors : ['#4d3a96', '#4576b5'],
    chart: {
      height: 350,
      type: 'bar',
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0
        }
      }
    }],
    plotOptions: {
      bar: {
        horizontal: false,
      },
    },
    series: [{
      name: 'PRODUCT A',
      data: [44, 55, 41, 67, 22, 43]
    }, {
      name: 'PRODUCT B',
      data: [13, 23, 20, 8, 13, 27]
    }],
    xaxis: {
      type: 'datetime',
      categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
    },
    legend: {
      position: 'right',
      offsetY: 40
    },
    fill: {
      opacity: 1
    },
  }

  var chart = new ApexCharts(
    document.querySelector("#chart"),
    options
  );

  chart.render();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">

Answer 2

对于 angular，您应该更改选项对象，使其包含如下内容：

colors: [
        "#00FF00",
        "#0000FF"
      ],

别忘了将此添加到您的 HTML :

<apx-chart
    [colors]="chartOptions.colors"
  ></apx-chart>

Answer 3

设置颜色为color:['#1A73E8','#B32824'],
添加选项plotOptions: { bar: { distributed: false,},}

[这是图表] https://i.stack.imgur.com/NZirI.png

Answer 4

对于最新版本的 Apexcharts，您可以这样做

series: [
    {
      name: 'PRODUCT A',
      data: [44, 55, 41, 67, 22, 43],
      color: "#41B883",
    }, 
    {
      name: 'PRODUCT B',
      data: [13, 23, 20, 8, 13, 27],
      color: "#00D8FF",
    }
],

ApexCharts Stacked Columns 系列的特定颜色

ApexCharts Stacked Columns specific color for series

javascript

colors

apexcharts