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

对于角度，您应该更改options对象，使其包含以下内容：

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

不要忘记将其添加到您的HTML中：

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

ApexCharts堆积柱系列的特定颜色

2 个答案: