7

我想在 Apex Charts Stacked Column 中显示数据，每个系列都有特定的颜色（将产品 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">

感谢帮助 ！

4

4 回答 4

8

在选项中设置颜色：

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

于 2019-08-30T19:28:06.933 回答
3

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

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

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

<apx-chart
    [colors]="chartOptions.colors"
  ></apx-chart>
于 2020-08-26T11:03:19.443 回答
1

对于 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",
    }
],
于 2022-01-27T08:17:59.557 回答
0
  1. 设置颜色color:['#1A73E8','#B32824'],
  2. 添加选项plotOptions: { bar: { distributed: false,},}

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

于 2021-11-15T07:10:18.677 回答